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1) Introduction al lenguaje JavaScript: 

A) Programas, lenguajes, scripts... 

Antes de comenzar: Nada de asustarse por la jerga tecnica. Para quien comienza desde 
cero, estas cosillas son lo primero que debiera conocer: Que es eso de programa, 
lenguaje, scripts o guiones.... 

Lo primero a aclarar es lo del programa, algo que realmente no es exclusivo de la 
informatica, todos hemos programado alguna vez: al poner el video para que grabe 
cuando no estamos en casa, cuando ponemos el despertador para que nos de el disgusto 
matutino...En el caso de un programa informatico los que programamos es un ordenador 
y los programas habitualmente se hacen escribiendolos en un cierto lenguaje. 

Concretando, un programa no es mas que una serie de instrucciones que le damos a un 
sistema para que haga cosas. En otras palabras, y en el caso que nos atane, es decirle al 
ordenador como hacer una determinada tarea. Puede por tanto ser algo tan simple como 
decirle que sume dos numeros y nos diga el resultado hasta algo tan complejo como 
decirle que controle todo un edificio: temperatura, puertas, iluminacion... En nuestro 
caso es algo bastante sencillo, vamos a decirle al ordenador que cuando presente nuestra 
pagina web al visitante haga cosas como poner en la pagina la fecha del dfa, hacer que 
una imagen se mueva de un lado a otro, responder de una determinada forma a la 
pulsacion del raton, etc. 

Para escribir un programa no nos vale ni el Castellano, ni el ingles, ni ninguno de los 
lenguajes que habitualmente usa el hombre para comunicarse. Para entendemos con un 
ordenador se utilizan los lenguajes informaticos. Existen dos grandes grupos de 
lenguajes a la hora de escribir un programa: Los compilados y Los interpretados. 

Cuando usamos lenguajes compilados seguimos los siguientes pasos: 

• Nosotros escribimos el programa (codigo fuente), 

• Un programa lo traduce al lenguaje interno del ordenador (se compilan) 

• Se obtiene asf un nuevo fichero que es el que se ejecuta tantas veces como se 
desee. 

Los programas asf obtenidos son los que se almacenan en ficheros con un nombre 
terminado en .exe o en .com, si trabajamos en los sistemas operativos DOS o Windows. 
Podrfamos resumir: Un programa compilado se traduce una vez y se ejecuta cuantas 
veces se desee. A este grupo pertenecen los lenguajes tradicionales como C, Pascal, Ada 
y otros. 

El otro grupo es el de los lenguajes interpretados, en estos el programa se escribe 
(codigo fuente), y el ordenador va leyendo cada instruccion, la traduce y la ejecuta. O 
sea, es necesario traducir el programa cada vez que se ejecuta. ^Quien traduce las 
instrucciones del programa? Pues muy sencillo, otro programa: el traductor o 
interprete. A este grupo pertenece el legendario Basic, el Perl y los llamados scripts 
como JavaScript y Vbscript. Los programas escritos en estos dos ultimos lenguajes son 
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interpretados por los navegadores de Internet como Internet Explorer, Netscape 
Navigator, Opera. 

Muy bien ya se que es un programa, pero a la hora de la verdad ^como se construyen los 
programas? ^Como se ejecutan?. Paciencia, sigue viendo las paginas de introduccion, 
mira por encima los ejemplos de JavaScript (deja el HTML dinamico para mas 
adelante) y pasa a ver la gramatica. Luego te das un paseo por los objetos. Pero todo 
gradualmente y con paciencia. 

B) El Javascript.... 

Escribir un programa por lo tanto es simplemente escribir instrucciones para que las 
ejecute el ordenador, utilizando para ello un cierto lenguaje. Es como escribir en ingles: 
necesitas conocer el vocabulario y la gramatica del idioma de Shakespeare. En nuestro 
caso usamos como lenguaje el JavaScript y necesitas conocer sus reglas y su 
vocabulario. Como ya sabes se trata de un lenguaje interpretado y los programas 
escritos con estos lenguajes son conocidos como scripts o guiones. Pese a su nombre no 
tiene nada que ver con Java, este ultimo es un lenguaje algo mas complejo con el que se 
pueden construir programas de proposito general como podrra hacerse con C++ o 
Visual Basic, la particularidad que tienen los programas Java es que pueden funcionar 
en cualquier ordenador y con cualquier sistema operativo. Las aplicaciones escritas para 
Internet en Java son conocidas como applets. 

La unica razon de ser de JavaScript son las paginas web. Con JavaScript no pueden 
construirse programas independientes, solo pueden escribirse scripts que funcionaran en 
el entomo de una pagina Web, interpretado por un explorador, de ahr la importancia de 
conocer para que explorador escribimos los guiones. Y aqur viene el primer obstaculo: 
no todos los exploradores integran en la misma forma los guiones JavaScript. 

La primera version de JavaScript se debe a Netscape, que lo introdujo con la version 2.0 
de su explorador, posteriormente han ido surgiendo nuevas versiones habiendo sido 
estandarizado po r la European Computer Manufacturers Asociation (EC MA). 


Version Exp 

Netscape Navigator 

Microsoft Internet Explorer 

2.0 

JavaScript 1.0 

No lo soporta 

3.0 

JavaScript 1.1 

JavaScript 1.0 

4.0 

JavaScript 1.2 

JavaScript 1.2 (ECMA) 

5.0 


JavaScript 1.5 (ECMA) 


Pondrfamos preguntarnos por que el esfuerzo de aprender JavaScript, ya es bastante con 
el HTML para construir paginas Web. En parte esto es cierto, con un buen programa 
editor podemos obtener una pagina para publicar en la red, pero esa pagina Web 
consistirfa en: texto, imagenes e hipervmculos, con los atributos como colores, tipos de 
letra y poco mas sobre los que el autor puede actuar. Pero ^y si quisieramos poner un 
menu desplegable?, £y si queremos que el visitante pueda mover una imagen por la 
pantalla? .^y si necesitamos validar el texto entrado por el usuario?.... En resumen si 
queremos ir mas alia de la simple presentacion de un documento en pantalla y queremos 
controlar al explorador no hay mas remedio que utilizar un programa. ^Por que en 
JavaScript? muy simple: es soportado por todos los exploradores, es sencillo y es el que 
esta siendo contemplado por los organismos de normalizacion. 

C) Variables, datos, objetos... 
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Para comenzar a utilizar Javascript (y cualquier lenguaje de programacion) es necesario 
conocer algunos conceptos basicos, no podemos empezar a hacer una casa si no 
sabemos que existen los ladrillos. Un programa es una lista de instrucciones, pero esas 
instrucciones se deberan ejecutar sobre algo, si damos una instruccion escribir debemos 
especificar que es lo que hay que escribir. Es evidente pues que en las instrucciones del 
programa tambien deben figurar los datos con que trabajar. Por ejemplo el nombre de 
una persona es "Juan", esta palabra es un dato. El precio de una manzana en ptas. es 10, 
este numero es otro dato. Estos datos no suelen usarse tal cual sino que se almacenan en 
unos elementos con nombre denominados Variables. En los ejemplos previos usarfa 
una variable, nombre, para guardar "Juan" o precio para guardar el 10. Si ahora digo al 
ordenador que escriba nombre el ordenador escribira su contenido, o sea, Juan. Un 
pequeno ejemplo par no aburrirnos: abre una ventana y escribe en la caja de direcciones 
del explorador lo que sigue: 

javascript:nombre="juan";window.alert(nombre) 

i Acabas de escribir un par de instrucciones en JavaScript! (no te preocupes aun de su 
significado), como ves has dado un valor a la variable nombre y luego se ha escrito el 
valor de esa variable. En el ejemplo anterior tambien podrfas haber escrito: 

window.alert("Mi nombre: "+nombre). 

Mediante el sfmbolo + has concatenado ambas cadenas. Has usado un operador, algo 
que no es nuevo si has estudiado alguna vez matematicas. Los operadores son sfmbolos 
usados para realizar operaciones con los datos, son los sfmbolos +, -, /, *, 
respectivamente sumar, restar, dividir y multiplicar. Como sabes estos operadores se 
usan con datos numericos: 4 + 5 son 9. Estas dos instrucciones que has escrito podrfan 
encerrarse en un bloque con un nombre, por ejemplo mepresento() y tendrfas una 
funcion. Podrfamos definir una funcion llamada quehoraesQ que encierre las 
instrucciones necesarias para que aparezca en pantalla la hora actual. Es decir mediante 
las funciones creamos las ordenes que luego podremos darle al navegador para que 
actue segun nuestro deseo. 

Hasta aquf has visto los elementos basicos existentes cualquier lenguaje de 
programacion, pero alguna vez habras lefdo que Javascript es un lenguaje que utiliza 
objetos a diferencia de Java que es un lenguaje orientado a objetos. que es eso de 
objetos? Los objetos son como una extension de las variables, una estructura que nos 
permite agrupar diferentes valores y nombres de funciones. Una variable numerica solo 
puede contener eso, un numero: 10 o 20 o 2000, una cadena tipo solo puede guardar una 
serie de caracteres "ACAD", "LE18P". Un objeto va mas alia puede guardar varias 
cosas a la vez. ^Suena raro?. Veamos un ejemplo muy sencillo: un rectangulo se 
caracteriza por la longitud de sus lados y por la forma de dibujarlo. En un programa el 
rectangulo se asimilarfa a un objeto que tendrfa dos propiedades: base y altura, y un 
metodo: como_dibujarlo. Este como_dibujarlo serfa una funcion que dibuja rectangulos. 
Si un programa define la variable mirectangulo como un objeto de este tipo y contiene 
la instruccion mirectangulo.como_dibujarlo dibujarfa en pantalla un rectangulo. La 
ventana del explorador que tienes delante es un objeto con propiedades como: altura, 
anchura, nombre... y metodos como abrir, cerrar, mover...Vamos a hacer algo con este 
objeto que se llama window, para ello abre otra ventana de tu navegador y escribe en la 
barra de direcciones javascript: window. close(). ^Has visto lo que ocurre? Has usado el 
metodo close() del objeto window para cerrar la ventana. Otro ejemplo escribe 
javascript:window.alert(window.closed), ahora has usado el metodo alert del objeto 
window para mostrar una ventana con el valor de la propiedad closed, closed que dice si 
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la ventana esta cerrada o abierta. Los objetos son bastante mas complicados que lo aquf 
expuesto, pero JavaScript no es un lenguaje orientado a objetos, aunque puede crearlos 
y por supuesto manipularlos. Los scripts manipulan los objetos propios del lenguaje y 
los que le proporciona el navegador. Y he aquf la causa de tus primeros dolores de 
cabeza como programador en javaScript: los sistemas de objetos de los diferentes 
navegadores no coinciden al 100%. 

D) La ejecucion de los scripts. 

Habitualmente cuando quieres ejecutar un programa basta con buscar el archivo 
correspondiente y hacer un sencillo click de raton o pulsar la tecla enter. ^Pero que pasa 
con los programas en JavaScript?. En los ejemplos que has escrito en los apartados 
anteriores has enviado instrucciones en javascript al navegador, le has dado ordenes en 
directo. Pero esta no es la forma habitual de ejecutar programas en JavaScript. Lo 
normal es que la ejecucion se realice de forma automatica cuando el navegador carga 
una pagina, o cuando el usuario pasa el raton por una imagen, o cuando pulsa el boton 
de un formulario, etc. Estos cambios provocan los llamados eventos que son recibidos 
por el navegador que reactionary en la forma adecuada: si haces click en un hiperenlace 
se genera un evento y el navegador abre una nueva pagina. Esos eventos son los que se 
aprovechan para que se ejecuten las instrucciones que nosotros escribimos en 
JavaScript. A cada evento se le puede asociar una funcion para que haga algo 
predeterminado por nosotros. Por ejemplo cuando el navegador carga una pagina se 
produce un evento que puede aprovecharse para hacer que se abra otra ventana (las 
conocidas como ventanas popup tan usadas para mensajes publicitarios), o cuando 
pasamos el raton por una enlace se produce otro evento que puede aprovecharse para 
llamar a una funcion que modifique el color en que se muestra el enlace, o cuando el 
usuario pulsa una tecla. Los eventos tienen la naturaleza de objetos, o sea, poseen 
metodos y propiedades. Asf cuando se produce un evento podemos saber quien lo 
dispara, en que position de la pantalla se ha disparado y otras propiedades dependientes 
de cada evento en concreto. Y aquf viene uno de las causas para tus futuros dolores de 
cabeza: cada navegador maneja los eventos de manera algo diferente. 

Pero sigamos con el tema de la ejecucion de los programas, veamos que es eso del flujo 
de programa. Cuando el navegador empieza a leer el script para ejecutarlo lo hace en 
orden secuencial, o sea, empieza con la primera instruction, sigue por la segunda y asf 
hasta llegar al final. Esto es lo que se conoce como ejecucion secuencial o lineal. Pero a 
veces es necesario saltarse instrucciones, por ejemplo, construyes una pagina a la que 
solo pueden entrar determinadas personas, deberas escribir una funcion que pida el 
nombre de quien desee ver la pagina, si es una persona autorizada muestra la pagina y si 
no lo es no la muestra. Tu programa no ha seguido un flujo lineal, unas veces ejecutara 
la parte de mostrar la pagina y otras no. Otra situation bastante comun: deseas que tu 
programa recorra todas las imagenes de tu pagina y vaya cambiando su contenido, no 
vas a escribir el mismo codigo una y otra vez, lo ideal serfa escribir las instrucciones y 
poderlas repetir.. Cualquier lenguaje de programacion tiene solucionado este asunto 
mediante las llamadas sentencias de control del flujo de programa. Son sentencias que 
permiten que se ejecuten condicionalmente algunos pasos (condicionales) o repetir una 
serie de instrucciones una y otra vez (bucles). Estas instrucciones la veremos en 
capftulos posteriores, con ejemplos y probando cositas. 



2) Elementos del Lenguaje: 


A) Los datos 

Anteriormente has hecho una primera aproximacion a los elementos basicos con que vas 
a enfrentarte al programar. Es el momento de ahondar algo mas en estos elementos y 
comenzaremos por los mas elementales: los datos. JavaScript maneja cuatro tipos de 
datos: numericos, de cadena, booleanos y punteros. Los datos numericos sirven para 
manejar cualquier numero real, como 12, 56.5, -9. Pero tambien son datos numericos: 
2.0E2, OxFO, 012. El primero corresponde a la llamada notacion cientifica: 2.0* 10 2 , 
mientras que el segundo ejemplo corresponde a la notacion hexadecimal y el tercero a la 
octal. Lo normal es que solo uses valores decimales y a veces hexadecimales. 

Los datos de cadena son los usados para cadenas alfanumericas, o sea, para representar 
palabras, as! los siguientes son datos de cadena: "prueba", "La clave es 4r5t ". Observa 
que estos datos estan encerados entre comillas, es la forma de decirle a JavaScript que 
esta ante una cadena de caracteres y no ante un nombre o descriptor de algun elemento 
del programa. Es decir "41" es un dato de cadena mientras que 41 es el numero cuarenta 
y uno. que ocurre si quiero que la cadena tenga comillas?, por ejemplo queremos 
escribir la siguiente frase Juan alias "Maqui" es el jefe, en JavaScript esto es una cadena 
y debe encerrarse entre comillas "Juan alias "Maqui" es el jefe", la interpretacion de esta 
cadena dana un error como puedes comprobar si escribes en la barra de direcciones la 
siguiente in struction: 

javascript:window.alert("Juan alias"Maqui" es el jefe") 

^Por que? Pues por que ahi hay dos cadenas y un nombre en medio: "Juan alias", Maqui 
y "es el jefe". JavaScript intentara encontrar una variable con el nombre Maqui. Para 
poder hacer esto correctamente se usa el caracter de escape: \, lo que sigue a esta barra 
invertida es un caracter especial que debe interpretarse como un caracter normal, prueba 
ahora esto: 

javascript:window.alert("Juan alias \"Maqui\" es el jefe") 

Ahora ya funciona perfectamente. Existen mas caracteres especiales como tabulaciones, 
cambios de lmea de escritura, borrado izquierda, la propia barra invertida. Puedes 
probarlos con la tecnica del alert: 

javascript:window.alert("Esto usa una \t tabulacion ") 
javascript:window.alert("Esto usa un \n cambio de linea") 
javascript:window.alert("Esto usa un \r retorno de carro") 
javascript:window.alert("Esto es la barra invertida \\ ") 

Esto es bastante importante pues en muchas ocasiones usaras un programa para escribir 
segmentos de paginas HTML donde tendras que usar caracteres especiales, como por 
ejemplo las comillas de los atributos. 

Estos datos son bastante habituales incluso en la vida cotidiana, pero existen mas tipos 
de datos como seguro sabes. Por ejemplo si preguntas a alguien ^son las cinco en 
punto? Solo hay dos posibles respuestas: SI o NO. Este tipo de datos no es ni numerico 
ni de cadena, es booleano. En los lenguajes de programacion en lugar de si o no se 
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emplean los valores true o false. Estos datos son los que utilizaras cuando en los 
programas se tengan que tomar decisiones, o sea, comprobar algo y actuar en 
consecuencia: si el explorador es Netscape 4.0 no usar efectos de presentacion, por 
ejemplo. 

Existe un ultimo tipo de datos que tambien se emplea a menudo en los scripts para la 
captura de eventos, son direcciones de memoria, o punteros, usadas para asignar 
funciones. Si en una variable se guarda el nombre de una funcion esa variable se 
convierte en otro nombre para esa funcion. ^Raro? Esto tiene su verdadera utilidad al 
asignar funciones a los eventos disparados por el raton. 

B) Las variables. 

Ya dijimos que los datos, los valores numericos no siempre pueden utilizarse de manera 
directa, sino que habitualmente se almacenan en una posicion de memoria con nombre, 
esto es lo que llamamos una variable. En otros lenguajes de programacion existen 
diferentes tipos de variables en funcion del tipo de datos que pueden guardar: variables 
para cadenas, para numeros enteros, para numeros reales, etc. JavaScript es muy 
permisivo en este aspecto de manera que una variable puede guardar cualquier tipo de 
dato y ademas pueden crearse en cualquier parte del programa. Esto ultimo es comodo 
pero peligroso pues puede llevar a programas dificiles de depurar y de modificar, es 
conveniente llevar un cierto control sobre las variables que vas usando en cada funcion 
y declararlas al principio de la misma. 

Hemos dicho que las variables tienen nombres, ^como son estos nombres? Yale 
cualquier combinacion de letras y dfgitos, mas el guion bajo, siempre que el primer 
caracter no sea un digito y por supuesto que no coincida con una palabra reservada del 
lenguaje, es decir, palabras con un significado especial para el interprete como close, 
open, write... Es aconsejable usar nombres autoexplicativos, es una forma de 
documentar tus programas. Por ejemplo una variable para guardar una direccion de un 
icono puede llamarse direc_icono. Un ultimo detalle JavaScript diferencia entre 
mayusuclas y minusculas, asi Edad y edad serfan dos variables distintas. 

Otro aspecto a tener en cuenta a la hora de usar las variables es su ambito, es decir, que 
funciones tienen acceso a ellas. Si se crea una variable dentro de una funcion solo sera 
conocida dentro de esa funcion, se trata de variables locales. Si se necesita que varias 
funciones tengan acceso a una determinada variable esta debe crearse como variable 
global, esto se hace creandola fuera de todas las funciones. Por ejemplo en el siguiente 
script tenemos variables globales y locales: 

<script language="Javascript"> 
var navegador_version = 0; 
function verNavegador() 

{ 

var version; 

version = document.appVersion; 
return version; 

} 

</script> 
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En este ejemplo navegador_version es una variable global mientras que version es local 
a la funcion verNavegador(). Observa que las variables estan creadas con la palabra 
clave var, el uso de esta palabra es opcional, solo es obligatorio si una variable local 
tienen el mismo nombre que una global. Otro detalle a tener en cuenta es que al mismo 
tiempo que creamos la variable podemos darle un valor, si no lo hacemos la variable 
contendra el valor null. 

C) Los Objetos 

Javascript no posee todas las caracterfsticas de los lenguajes orientados a objetos como 
Java o C++, pero si es capaz de manejar objetos e incluso crearlos. De hecho si un 
programa en este lenguaje es capaz de interactuar con el explorador es gracias a esta 
capacidad. Javascript posee algunos objetos predefinidos u objetos intrfnsecos como 
son: Array, Boolean, Date, Function, Global, Math, Number, Object, RegExp, y 
String. Ademas el programador puede crear objetos nuevos, con sus propios metodos y 
propiedades, adaptados a las necesidades concretas de su aplicacion. 

Crear un objeto nuevo es tan simple como definir cuales seran sus propiedades y sus 
metodos, teniendo en cuenta que cualquier objeto que definamos ya posee heredados los 
metodos y propiedades del objeto predefinido object. En el ejemplo siguiente creamos 
un objeto pagina que aclarara la forma de crear objetos propios: 

function pagina (titulo, color, fondo) 

f 

this.titulo = titulo; 
this.color = color; 
this.imgfondo = fondo; 
this.length = 3; 

} 

var miPagina = new pagina("Mi pagina", "Blue", "cruces.gif"); 
var nuevapag = new pagina("2 3 Pagina", "White", ""); 

Este objeto se crea con el operador new pasandole como argumentos las propiedades 
declaradas para este objeto: titulo, color, imgfondo. La palabra clave this se usa para 
referirnos al propio objeto que estamos definiendo. Aun mas podemos crear 
propiedades nuevas solo para la variable miPagina, pero estas propiedades no afectaran 
al objeto pagina en si. Por ejemplo: 

miPagina.descripcion = "Este es un ejemplo"; 
alert (miPagina.descripcion) ; 

da como resultado la frase Este es un ejemplo, pero si ahora escribieramos: 

alert(nuevaPag.descripcion); 

obtendrfamos undefined pues descripcion solo es una propiedad de la variable 
miPagina no del objeto pagina. Para ampliar un objeto usamos la propiedad prototype: 

pagina.prototype.descripcion = "Objeto definido por mi"; 
alert(nuevaPag.descripcion); 
alert(miPagina.descripcion); 
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Ahora hemos anadido una propiedad al objeto pagina y esta propiedad se transmite a 
las variables de tipo pagina (mas correctamente instancias de pagina), por tanto en 
ambos casos obtendrfamos la frase Objeto definido por mi, que es el valor dado a la 
nueva propiedad. 

D) Los Arrays 

A pesar de su extrano nombre los arrays no son mas que estructuras para almacenar 
listas de valores. A diferencia de otros lenguajes, en Javascript los arrays no son un tipo 
de variable sino que fueron implementados por Netscape como un objeto, lo cual les da 
una potencia enorme. Pero empecemos por abajo. Un array puede verse como una lista 
con nombre donde podemos anotar cosas, cada anotacion se identifica por su numero de 
orden en el array (la lista), su indice, y el numero total de espacios para anotar cosas en 
el array es su longitud. Si en un array tenemos anotados 5 numeros, el primero de todos 
sera el de indice 0 y el ultimo tendra como indice el 4, siendo 5 la longitud del array. 
Simple ^verdad?, veamos como se crea un array y como se asignan valores en unos 
ejemplos muy sencillos: 


semana = new Array(7); 
miLista = new Array(1,5,9); 

nombres= new Array('Juan', 'Luis', 'Maria'); 
vacio = new Array(); 
interesante = new Array(4); 


El array semana se ha creado con longitud 7, o sea, permite 7 elementos. El array 
miLista se ha creado con longitud 3 y se ha dado valor a cada elemento al igual que el 
array nombres. Por ultimo el array vacio se ha creado sin longitud. 


semana[0) = 
semana[1] = 
semana[2] = 
semana[3] = 
semana14] = 
semana [5] = 
semanat©) = 
vacio [5] = 
interesante 
interesante 
interesante 


'Lunes'; 
'Martes'; 
'Miercoles'; 

'Jueves' ; 

'Viernes'; 

'Sabado'; 
'Domingo' ; 

'ultimo'; 

[ 'Jose'] = 10; 
['Pilar'] = 5; 
[ 'Antonio' ] = 


En este ultimo segmento de codigo hemos rellenado los arrays: semana se ha rellenado 
con los nombres de los dias de la semana. Observa el array vacio, hemos dado valor al 
elemento 5, a partir de ahora este array tiene longitud 6 con los cindo primeros 
elementos con valor null y el sexto (vacio[5]) con valor 'ultimo'. Por ultimo el array 
llamado interesante, y lo es: los indices no tienen porque ser numericos. 

Cada elemento de un array puede ser un valor de cualquier tipo: numeros, cadenas ... u 
otro array, en este ultimo caso tendremos arrays multidimensionales, o sea, donde cada 
elemento tiene varios indices o coordenadas para localizarlos. ^Un lio? vemos el caso 
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mas simple, un array bidimensional serfa un array donde cada elemento es a su vez otro 
array con lo que cada elemento tendra dos indices uno para el primer array y otro para el 
segundo. El array bidimensional podmeos imaginarlo como una tabla ordenada en filas 
y columnas, cada elemento del array es una celda de esa tabla. Un ejemplo para una 
tabla de 3 filas y 2 columnas: 

function matBidim() 

{ 

var tabla = new Array(3); 
tabla[0] = new Array(2); 
tabla[0][0] = 10; 
tabla[0][1] =5; 
tabla[1] = new Array(2); 
tabla[1][0] = 7; 
tabla[1][1] = 8; 
tabla[2] = new Array(2); 
tabla[2][0] = 9; 
tabla[2): [l] = 3; 

alert (tabla [1] [1]); /*Visializarla un cuadro con el 

numero 8*/ 

} 

Como ves la cosa es sencilla: el array tabla tiene tres elementos y cada uno de ellos es a 
su vez otro array de dos elementos. 

E) Las Funciones 

Las funciones como decfamos en la introduccion, no son mas que bloques de 
instrucciones de programa con nombre y que pueden ejecutarse sin mas que llamarlas 
desde alguna parte de otra funcion o desde la pagina HTML, bien sea directamente o 
mediante eventos. 

Habitualmente una funcion se crea para ejecutar una accion muy concreta. Javascript 
posee una serie de funciones predefinidas o funciones globales pero el programador 
puede crear las suyas propias. Para crear una funcion, tan solo es necesario indicarselo 
al interprete mediante la plabra clave function seguida del nombre que deseemos darle 
a la funcion y, encerrados entre parentesis, las variables que simbolizan los valores con 
los que deba trabajar la funcion, los argumentos. Los parentesis deben escribirse aunque 
no haya argumentos. Para los nombres de funciones seguimos las mismas reglas que 
para las variables: carateres, digitos y guion bajo, debiendo comenzar por un caracter o 
el guion bajo. 

Como es natural es recomendable dar a las funciones un nombre representativo de la 
operacion que realize. Por supuesto no debemos darle un nombre que ya exista en 
JavaScript. A continuacion encerradas entre llaves escribimos las sentencias u ordenes 
en JavaScript. Opcionalmente la funcion puede finalizar con la palabra clave return 
seguida de un valor, este valor sera el que devuelva la funcion al programa que la llame. 
Por ejemplo: 

function sumar(a,b) 

I 

var suma; 
suma = a + b; 
return suma; 

} 
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Mediante este ejemplo creamos la funcion llamada sumar, que utiliza dos argumentos y 
lo que hace es sumar estos argumentos. Por ultimo devuelve el resultado de la 
operacion, mediante la palabra clave return seguida del valor que debe devolver. Ahora 
en el siguiente codigo de programa usamos la funcion recien definida: 

var operacion; 
operacion = sumar(4,5); 
alert(operacion); 

En este codigo llamamos a la funcion con los argumentos 4 y 5 y almacenamos el 
resultado en la variable operacion. 

Hasta aqui el comportamiento de las funciones JavaScript es similar a cualquier otro 
lenguaje, pero en JavaScript las funciones tambien son objetos. Yeamos el siguiente 
ejemplo: 

var multip = new Function ("x", "y", "return x * y") 

alert(multip(8,9)); 

Interesante, ahora multip no es una variable cualquiera sino una instancia del objeto 
Function y puede usarse como la propia funcion. Esta caracterfstica permite asignar 
directamente funciones a los eventos de las paginas web y asr simplificar su 
programacion. 
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3) Los Operadores: 


A) Operadores Aritmeticos 

En los primeros ejemplos de este tutor tan solo se han usado sentencias muy simples 
como asignar un valor a una variable, mediante el operador de asignacion, =, o realizar 
operaciones aritmeticas, pero evidentemente JavaScript puede realizar mas operaciones. 
En esta seccion y las siguientes se presentan los operadores de que dispone este lenguaje 
clasificados en varios grupos, segun el contexto en el que se usen. Comenzamos con los 
mas conocidos, los operadores aritmeticos. 

Suma + 

Se trata de un operador usado para sumar dos valores numericos o para concatenar 
cadenas entre si o numeros y cadenas. 

var varl = 10, var2= "Buenos", var3 = " dias", var4 = 31; 
document.write(varl+var4) /* resultado 41 */ 

document.write(var2+var3) /* resultado: Buenos dias */ 

document.write(varl+var3) /* resultando: 10 dias */ 


Resta - 

Operador usado para restar valores numericos. Puede actuar sobre un unico operando 
numerico cambiandole de signo. 

var numl = 10, num2 = 8, res =0; 

res = numl - num2; /*res contiene 2 */ 

res = -res /* ahora res contiene -2*/ 

Producto ( * ) y cociente (/) 

Realizan las operaciones aritmeticas de multiplicar y dividir dos valores 

var opl = 50, op2= 4, div, mul; 

div = opl/op2 /*div contiene 12.5 */ 

mul = opl * op2 /*mul contendra 200 */ 

Resto % 

Tambien llamado operador modulo calcula el resto de una division. 

var opl = 50, op2= 4, resto; 

resto = opl % op2; /*resto contiene 2 */ 

Incremento ( ++) v decremento (--) 

Estos operadores se usan para incrementar o decrementar en 1 el valor de una variable. 
Si el operador se antepone a la variable la operacion de incremento o decremento es 
prioritaria sobre cualquier otra. 

var opl=5, op2 = 5, res; 

res = ++opl; /*res adquiere el valor 6 y luego opl el 6*/ 

res = opl++; /*res adquiere el valor 5 y luego op2 el 6*/ 

Operadores compuestos 

Los operadores +, *, / pueden asociarse con el operador de asignacion (=) para 

cambiar el valor de una variable numerica por incrementandolo, decrementandolo, 
multiplicandolo o dividiendolo por un valor. El operador += puede usarse igualmente 
con variables de cadena. 

var num = 20, cad = "buena"; 

num += 5; /*num adquiere el valor 25 (20 + 5) */ 

cad += 's' ; /*cad adquiere el valor 'buenas' */ 

num *= 10; /*num adquiere el valor 250 (25*10) */ 
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B) Operadores Binarios 


E1 ordenador, intemamente, trata cualquier tipo de datos como una cadena binaria ( 
ceros y unos). Asr los numeros se representan en sistema binario de numeracion 
mientras que los caracteres se convierten a codigo ASCII, que son numeros que se 
almacenan por tanto codificados en binario. JavaScript ofrece los operadores tfpicos 
para trabajar con estas cadenas a nivel de bit (cada uno de los ceros o unos de las 
cadenas binarias. Para trabajar con estos operadores es conveniente tener una idea 
previa sobre la codificacion binaria. 

Complementacion ~ 

Complementa una cadena binaria convirtiendo los 1 en 0 y los 0 en 1. 

Por ejemplo el numero 38 escrito en sistema binario es 00100110 si le aplicamos este 
operador se convierte en 11011001, o sea el -39 (JavaScript usa codificacion en 
complemento a 2 para los numeros negativos). 

Desplazamiento izquierda « 

Desplaza los bits a la izquierda los lugares que se le indique rellenando con ceros por la 
derecha y desechando los bits de mayor peso, esto equivale a multiplicar por potencias 
de 2. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la izquierda tendremos el 
01101000(104). 

var num = 2 6, res; 

res = num « 2; /* num contendra 104 */ 

Desplazamiento derecha » 

Desplaza los bits a la derecha los lugares que se le indique rellenando con ceros por la 
izquierda y desechando los bits de menor peso, esto equivale a una division entera por 
potencias de 2. Por ejemplo si al 00011010 (26) lo desplazamos 2 a la derecha 
tendremos el 00000110 (6). 

var num =26, res; 

res = num « 2; /* num contendra 104 */ 

AND logico binario & 

Realiza un AND logico bit a bit entre dos valores. El AND logico da como resultado 1 
solo si ambos bits son 1. Por ejemplo 
0 110 110 1 (109) 

AND 0 0 1 0 0 1 1 0 (38) 
resultado: 00100100 (36) 

var opl = 109, op2 = 38, res; 

res = opl & op2; /*res contiene 36 */ 

OR logico binario I 

Realiza un OR logico bit a bit entre dos valores. El OR logico da como resultado 0 solo 
si ambos bits son 0. Por ejemplo 

0 0 1 1 1 0 1 0 (58) 

OR 0 1 0 1 0 0 1 0 (82) 

resultado: 0 11110 10 (122) 

En el ejemplo podemos ver la sintaxis del operador 

var opl = 58, op2 = 82, res; 

res = opl | op2; /*res contiene 122 */ 
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XOR logico binario A 

Realiza un XOR logico bit a bit entre dos valores. El XOR logico da como resultado 1 
si uno solo de los bits es 1. Por ejemplo 
0 0 1 1 1 0 1 0 (58) 

OR 0 1 0 1 00 1 0 (82) 

resultado: 00101000 (40) 

En el ejemplo podemos ver la sintaxis del operador 
var opl = 109, op2 = 38, res; 

res = opl A op2; /*res contiene 40*/ 


C) Operadores Logicos 

Loperadores logicos se utilizan para realizar comparaciones entre valores, numericos o 
no, dando como resultado un valor booleanos (true, false). La operation logica 
negation invierte el operando, si es true lo hace false y viceversa. Si se comparan 
numeros con cadenas, JavaScript intenta convertir internamente los datos. En los 
operadores relacionales (>, <, >=, <=) intenta convertir los datos en tipo numero. Para 
los operadores de igualdad (== !=) intenta convertir los tipos de datos a cadena, numero 
y booleano. Los operadores de identidad (===, !==) no realizan conversion de tipo. 

Mayor que > 

Compara dos valores y devuelve true si el primero es mayor que el segundo. Compara 
tanto numeros como cadenas. 

var hoy = 4; ayer = 10, comp; 

comp = hoy > ayer /* comp adquiere el valor false*/ 

Menor que < 

Compara dos valores y devuelve true si el primero es mayor que el segundo. Compara 
tanto numeros como cadenas. 

var hoy = 4; ayer = 10, comp; 

comp = hoy < ayer /* comp adquiere el valor false*/ 

Mayor o igual >= 

Compara dos valores y devuelve true si el primero es mayor o es igual que el segundo. 
Compara tanto numeros como cadenas. 

var hoy = 4; ayer = 4, comp; 

comp = hoy >= ayer /* comp adquiere el valor true*/ 

Menor o igual <= 

Compara dos valores y devuelve true si el primero es menor o es igual que el segundo. 
Compara tanto numeros como cadenas. 

var hoy = 4; ayer = 4, comp; 

comp = hoy <= ayer /* comp adquiere el valor true*/ 

Iguales == 

Compara dos valores y devuelve true si ambos son iguales. Compara tanto numeros 
como cadenas. 

var hoy = 4; ayer = 4, comp; 

comp = hoy == ayer /* comp adquiere el valor true*/ 

Identicos === 

Similar a == pero tambien compara el tipo de datos de los opeandos. 

Compara dos valores y devuelve true si el primero es mayor o es igual que el segundo. 
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Compara tanto numeros como cadenas. 

var hoy = 4; ayer = '4', comp; 

comp = hoy == ayer; /* comp adquiere el valor true*/ 

comp = hoy === ayer /* comp adquiere el valor false*/ 

No iguales != 

No identicos !== 

Invierten el sentido de las comparaciones iguales == e identicos === respectivamente. 

AND logico && 

Este operador se utiliza para concatenar comparaciones, es decir, para comprobar varias 
condiciones. El resultado solo sera true si todas las comparaciones lo son. 

var opl = 2, op2 = 50, op3 = 25, comp; 

comp = (opl > op2) && (opl < op3); /*comp adquiere el valor 

false */ 

comp es false por que opl no es mayor que op2 aunque sea mayor que op3 

OR logico II 

Como el anterior, sirve apra realizar comparaciones compuestas y solo devolvera false 
cuando todas las comparaciones los sean. Es decir basta que una comparacion sea true 
para que devuelva el valor true. 

var opl = 2, op2 = 50, op3 = 25, comp; 

comp = (opl > op2) && (opl < op3); /*comp adquiere el valor 

true */ 

comp es true por que opl es menor que op3, (opl < op3 es por tanto true) 

D) Operadores Varios 

delete 

Se usa para borrar propiedades de un objeto o elementos de un array. Devuelve true si la 
operacion se realizao con exito. 

var lista = new Array(1,4,7,9,10); 
delete(lista,0); 

El elemento lista[l] contiene ahora undefined. 

new 

Se utiliza para crear instancias de un objeto 

var hoy = new Date ("10 /30/2000") 

typeof 

Devuelve el tipo de dato al que pertenece una variable o expresion. Los tipos devueltos 
son number, string, boolean, object, function y undefined. 

hoy = 1.2345; 
tipo = typeof(hoy); 

La variable tipo contendra number. 

E) Funciones Globales 

A si como JavaScript proporciona objetos predefinidos, tambien posee una serie de 
funciones predefinidas. Se trata de las funciones: eval, isNan, Number, String, 
parselnt, parseFloat, escape, unescape. 
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eval 

Se usa para evaluar una cadena con codigo JavaScript sin referirse a un objeto concreto. 

La sintaxis de eval es: 

eval(expr) 

donde expr es la cadena a evaluar. 

isNaN(arg) 

Determina si el argumento es un valor NaN (not a number) 

parselnt(str, [basel) 

Convierte una cadena de caracteres en un valor numerico. La funcion lleva como 
argumento la cadena a convertir y opcionalmente puede llevar un segundo argumento 
para indicar la base de numeracion en que esta escrita la cadena. Si se omite se supone 
que la cadena representa un numero en base 10. La cadena solo podra contener 
caracteres validos para el sistema de numeracion indicado: digitos (0..9 para la base 10, 
0 1 para numeros binarios, 0..7 para sistema octal, 0..9, A..F para sistema hexadecimal) 
y signo (+, -). Si encuentra algun caracter no valido solo interpreta desde el principio de 
la cadena hasta el caracter no valido. Si comienza por un caracter ilegal devuelve NaN. 
Ejemplo: 

var minuml = "14"; 

document.write(parselnt(minuml)); 


Escribira 14. En el siguiente ejemplo transforma un numero binario a decimal: 

var minuml = "11001"; 

document.write(parselnt(minuml,2)); 


Ahora escribira 25, el equivalente decimal al binario 11001. 

parseFloat(str) 

Convierten una la cadena que se le pasa como argumento a un valor numerico de tipo 
flotante. Los caracteres validos de la cadena son los mismos que en parselnt mas el 
punto decimal y el exponente (E). No admite un segundo argumento. Por lo demas 
funciona exactamente igual que parselnt. 

var minuml = "14.5E2"; 

document.write(parselnt(minuml)) ; 


Escribira el numero 1450, 14.5 por 10 elevado a 2. 

Number(objArg) and String(objArg) 

Permiten convertir el objeto pasado como argumento a un numero o a una cadena. Por 
ejemplo: 

var hoy = new Date(); 
hoy.getDate (); 

document.write(string(hoy)); 

Escribira en pantalla la cadena "Sun Sep 3 20:40:05 UTC+0200 2000" si la fecha del 
dia es domingo 3 de Septiembre y la hora es las 20:40:05. 
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escape(cadarg) 

Codifica la cadena del argumento substituyendo todos los caracteres no ASCII por su 
codigo en el formato %xx. Por ejemplo: 

var cadena = "Buenos dias"; 
document.write(escape(cadena)) ; 

Produce la frase "Buenos d%EDas", pues la I (i acentuada) es el codigo hexadecimal 
ED de ese caracter. 

unescape(cadarg) 

Es inversa a la anterior, de manera que si la cadena contiene codigos del tipo %xx son 
convertidos al correspondiente caracter ASCII extendido. 

var cadena = "Buenos d%EDas"; 
document.write(escape(cadena)) ; 


Ahora se escribira "Buenos dias", se ha substituido %ED por su equivalente I (i 
acentuada). 

F) Expresiones Regulares 

Las expresiones regulares constituyen un mecanismo bastante potente para realizar 
manipulaciones de cadenas de texto. El proceso para el que se usan estas expresiones, 
presente en el mundo el UNIX y el lenguaje Perl, es el de buscar y/o sustituir una 
subcadena de texto dentro de otra cadena. En principio esto puede hacerse usando los 
metodos del objeto string, pero el problema surge cuando no tenemos una subcadena 
fija y concreta sino que queremos buscar un texto que responda a un cierto esquema, 
como por ejemplo: buscar aquellas palabras que comienzan con http: y finalizan con 
una \, o buscar palabras que contengan una serie de numeros consecutivos, etc.; es en 
estos casos cuando las expresiones regulares muestran toda su potencia. La subcadena 
que buscamos en el texto es lo que se llama un patron y se construye encerrando entre 
dos barras inclinadas (/) una serie de caracteres normales y simbolos especiales 
llamados comodines o metacaracteres, (algo parecido a la orden dir *.bat usada en el 
DOS cuando querfamos listar los ficheros con extension bat). Este patron es una 
descripcion del texto que se esta buscando y JavaScript encontrara las subcadenas que 
concuerdan con ese patron o definicion. Las expresiones regulares se usan con el objeto 
Regular Expresion y tambien dentro de los metodos String.match, String.replace, 
String.search y String.split. 


En la tabla que sigue se muestran los caracteres comodin usados para crear los patrones 
y su significado, junto a un pequeno ejemplo de su utilizacion. _ 



Significado 

Ejemplo 

Resultado 

\ 

Marca de caracter especial 

A$ftp/ 

Busca la palabra $ftp 

A 

Comienzo de una linea 

/*-/ 

Lineas que comienzan por - 

$ 

Final de una linea 

/s$/ 

Lineas que terminan por s 


Cualquier caracter (menos salto de 
linea) 

Ab.\b/ 

Palabras de una sola letra 

1 

Indica opciones 

/(L|l|f|)ocal/ 

Busca Local, local, focal 

() 

Agrupar caracteres 

/(vocal)/ 

Busca vocal 

[] 

Conjunto de caracteres opcionales 

/escrib[aoe]/ 

Yale escriba, escribo, escribe 
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La tabla que sigue describe los modificadores que se pueden usar con los caracteres que 
forman el patron. Cada modificador actua sobre el caracter o el parentesis 
inmediatamente anterior. 



Descripcion 

Ejemplo 

Resultado 

* 

Repetir 0 o mas veces 

71*234/ 

Valen 234, 1234, 11234... 

+ 

Repetir 1 o mas veces 

/a* mar/ 

Valen amar, aamar, aaamar... 

? 

1 o 0 veces 

/a?mar/ 

Valen amar, mar. 

{n} 

Exactamente n veces 

/p{2}sado/ 

Vale ppsado 

{n,} 

A1 menos n veces 

/(m){2}ala/ 

Vale mmala, mmmala.... 

{m,n} 

entre m y n veces 

/tal{ 1,3} a/ 

Vale tala, talla, tallla 


Los siguientes son caracteres especiales o metacaracteres para indicar caracteres de 
texto no imprimibles, como puedan ser el fin de linea o un tabulador, o grupos 
predefinidos de caracteres (alfabeticos, numericos, etc...) 



Descripcion 

Ejemplo 

Resultado 

\b 

Principio o final de palabra 

AbverW 

Encuentra ver en "ver de ", pero 
noen "verde" 

\B 

Frontera entre no-palabras 

ABverXB/ 

Empareja ver con "Valverde" 
pero no con "verde" 

\d 

Un digito 

/[A-Z]\d/ 

No falla en "A4" 

\D 

Alfabetico (no digito) 

/[A-Z]\D/ 

Fallaria en "A4" 

\o 

Caracter nulo 



\t 

Caracter ASCII 9 (tabulador) 



\f 

Salto de pagina 



\n 

Salto de linea 



\w 

Cualquier alfanumerico, 
[a-zA-Z0-9_ ] 

Aw+/ 

Encuentra/raye en "frase .", 
pero no el. (punto). 

\W 

Opuesto a \w 
([ A a-zA-Z0-9_ ]) 

AW/ 

Hallarfa solo el punto (.) 

\s 

Caracter tipo espacio (como 
tab) 

AsSi\s/ 

Encuentra Si en "Digo Si ", 
pero no en "Digo Sientate" 

\s 

Opuesto a \s 



\cX 

Caracter de control X 

\c9 

El tabulador 

\oNN 

Caracter octal NN 



\xhh 

El hexadecimal hh 

Ax41/ 

Encuentra la A (ASCII Hex41) 
en "letraA” 
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4) La gramatica: 


A) Condicionales 

El orden en que se ejecutan las instrucciones de un programa es, por defecto, secuencial: 
ejecuacion instruccion tras instruccion. Asf un programa se escribira como una sucesion 
de instrucciones o sentencias, utilizando un punto y coma para indicar el final de la 
instruccion. Pueden agruparse una serie de sentencias en un bloque encerrandolas entre 
llaves. A veces es necesario alterar este orden para ello se utilizan las instrucciones de 
control: condicionales, seleccion y bucles. Seran las sentencias condicionales las 
primeras que veremos. 

Una sentencia condicional es una instruccion en la que se hace una comparacion y 
segun el resultado verdadero o falso (true o false) de la misma el programa seguira 
ejecutando una u otra instrucciones. La condiconal mas simple que podemos escribir es 
aquella que ejecuta u omite una serie de sentencias dependiendo de si la comprobacion 
da verdadero o falso. La sintaxis de esta sentencia es. 

if (condicion) 

{bloque a ejecutar si la condicion es cierta} 

else 

{bloque a ejecutar si la condicion es false} 

Si omitimos la parte del else tendremos una condicional simple. Esta sintaxis en algunos 
casos puede simplificarse utilizando la siguiente forma: 

(condicion) ?{bloque si cierta} : {bloque si falsa} 

En el siguiente ejemplo evitamos realizar una division por cero 

if (div == 0) 

alert('No se puede dividir por O'); 

else 

coc = num / div; 


Otro ejemplo usando la segunda forma: 

cad = (num >= 0) ? ' + ' : ' - '; 


En este ejemplo cad tomara el valor + si num es positivo o cero y el - si es negativo. 

Las sentencias if pueden anidarse, es decir, dentro de una sentencia if pueden meterse 
mas sentencias if. 

Las condiciones pueden ser sencillas como en estos ejemplos o pueden enlazarse usando 
los operadores && y || (AND y OR logicos). Yeamos un ejemplo en el que 
comprobamos si un numero esta comprendido entre 1 y 5: 

if ((num>=l) y (num < 5) 

{ 

lista[indice] = 'Muy bajo'; 
bajos++; 

} 

indice++; 
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En este ejemplo si num esta entre 1 y 5 (excluido) se anota en una lista la palabra 'Muy 
bajo' y se incrementa la variable bajos. Como vemos no se ha usado la parte de else y 
como se deben ejecutar mas de una sentencia las hemos encerrado entre llaves. Si num 
no cumple la condicion el programa se salta este bloque. En cualquier caso la siguiente 
instruccion que se ejecute tras el condicional sera la que incrementa el valor de indice. 

B) Seleccion Multiple 

L a estructura condicional permitia a lo sumo elegir entre dos posibles c aminos en la 
ejecucion de un programa: si la condicion era cierta se ejecuta un bloque y si no se 
ejecuta otro. Pero pueden existir casos en los que el programa deba tener mas de dos 
alternativas, por ejemplo si queremos un programa que presente un titulo en un idioma 
de cuatro posibles. Esto puede solucionarse mediante varios if anidados, siguiendo el 
ejemplo tenemos que elegir entre idiomas: Castellano, ingles, frances y aleman. 

if (leng == "castellano") 
pagCast (); 

else 

if (leng == "ingles") 
paging () ; 

else 

if (leng == "frances") 
pagFran(); 

else 

if (leng == "aleman") 
pagAlemt(); 

else 

error('idioma no presente'); 

Como vemos resulta un codigo bastante complejo. Para estos casos disponemos de la 
sentencia switch...case...default, de seleccion multiple. El ejemplo anterior quedarfa: 

switch (idioma) { 

case 'castellano' : 
pagCast () ; 
break; 

case 'ingles' : 
paging(); 
break; 

case 'frances' : 

pagFran () ; 
break; 

case 'aleman' : 

pagAlem(); 
break; 
default : 

error ('Idioma no presente'); 

} 

Durante la ejecucion se compara la variable idioma con cada uno de los posibles 
valores y cuando coincidan ejecuta el codigo correspondiente. La instruccion break 
pone fin al bloque y hace que el programa salte a la instruccion siguiente a la sentencia 
switch(), si se omite el programa continuarfa con la siguiente comparacion. La seccion 
del default es opcional, su finalidad es ejecutar algun codigo cuando ninguna de las 
condiciones se cumpla. 
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C) Bucles 


A veces es necesario repetir un mismo conjunto de sentencias varias veces. Por ejemplo 
para borrar todos los elementos de un array simplemente debemos hacer delete en cada 
uno de ellos, es una sentencia que se repetira tantas veces como largo sea el array. Este 
es un tfpico trabajo para las estructuras repetitivas o bucles. En esencia la ejecucion de 
un bucle consiste en ejecutar repetidas veces una misma parte del programa (cuerpo del 
bucle) hasta que se cumpla una determinada condicion, en cuyo caso se acaba la 
repeticion y el programa continua con su flujo normal. Existen varias sentencias de 
bucles: while (condicion) {...}, do {...} until (condicion) y for(contador; condicion; 
modcont) {...}. 

Sentencia while 

En esta estructura el programa primero comprueba la condicion: si es cierta pasa a 
ejecutar el cuerpo del bucle, y si es falsa pasa a la instruccion siguiente a la sentencia 
while. Como siempre un ejemplo lo aclarara todo: 

var lista = new Array (10); 
var ind=0; 
while (ind < 10) 

{ 

lista[ind] = 'O'; 
ind++; 

} 


En este ejemplo mi entras que el valor almacenado en ind sea menor que 10 (la longitud 
del array ) ira almacenando en cada elemento del array lista un 0 e incrementando el 
valor de ind. Cuando este valor sea 10 el programa no entrara en el cuerpo del bucle. Si 
no se incrementara el valor de ind el bucle no acabaria nunca, el programa quedarfa 
ejecutando indefinidamente el cuerpo del bucle. 

Sentencia do...while 

Se trata de un bucle en el que la condicion se comprueba tras la primera iteracion, es 
decir que el cuerpo del bucle se ejecuta al menos una vez. El ejemplo anterior quedarfa 
como sigue 

var lista = new Array(lO); 
var ind=0; 
do 

lista[ind] = 'O'; 
ind++; 

while (ind < 10) 

Como vemos aquf no son imprescindibles las Haves para encerar el cuerpo del bucle. No 
esta contemplada en el standard ECMA 1.5. 

Sentencia for 

Esta sentencia utiliza una variable de control a modo de contador para controlar la 
repeticion del cuerpo del bucle. La sentencia da un valor inicial a este contador y en 
cada iteracion lo modifica segun le indiquemos y comprueba la condicion, si se cumple 
ejecuta el cuerpo del bucle, si no lo salta y continua por la siguiente sentencia. Vemos el 
ejemplo anterior usando esta sentencia: 
var lista = new Array(lO); 
var ind; 

for (ind=0; ind < 10; ind++) 
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{ 

lista[ind] = 'O'; 

} 

Como vemos el cuerpo del bucle no incrementa la variable ind, esto se indie a en la 
cabecera de la sentencia. Este codigo hace exactamente lo mismo que el anterior. 

Sentencia for... in 

Se trata de una variante de la sentencia for utilizada para iterar o recorrer todos los 
elementos de un objeto o de un array. Usa una variable de control que en cada iteracion 
toma el valor del elemento del objeto recorrido. Por ejemplo si pruebas este codigo 
podras ver todos los elementos del objeto document 

var item; 

for (item in document) 

document.write(item+'<br>'); 

Con una matriz la variable de control toma el valor de los indices de la matriz, no su 
contenido. 


D) Ruptura de Bucles 


Aunque procuremos usara una programacion estructura alguna vez puede ser necesario 
interrumpir la repeticion de un bucle o forzar una iteracion del mismo, esto puede 
lograrse mediante las sentencias break y continue. Son sentencias aplicables a 
cualquiera de las estructuras de bucle en JavaScript. 


break 

La sentencia break interrumpe la iteracion actual y envia al programa a la instruction 
que sigue al bucle. 

var lista = new Array ('a', ' b', ' c', ' z ', ' x','f'); 

var item ; 

for (item in lista) 


} 


if (lista[item] == "z") 
break; 

document.write(lista[item] + '<br>') ; 


Este ejemplo escribiria el contenido del array lista hasta encontrar una letra z. 


continue 

La sentencia continue interrumpe la iteracion actual y envia al programa a la 
comprobacion de la condicion, si esta es cierta continua con la siguiente iteracion. 

var lista = new Array ('a','b','c','z','x','f'); 
var item ; 


for 


} 


(item in lista) 

{ 

if (lista[item] == "z") 
continue; 

document.write(lista[item]+'<br>'); 


Este ejemplo escribiria el contenido del array saltandose la letra z. 
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5) Los Objetos: 


A) Arrays 

Como objetos que son, los arrays poseen sus propiedades y metodos predefinidos, que 
son ampliables por el usuario. Es necesario hacer notar que estos metodos y propiedades 
son los definidos para el JavaScript 3.0 de Microsoft. Netscape anade mas metodos en 
su version, pero los aquf definidos son comunes a ambos navegadores. 

Propiedades 

length 

Como su nombre indica esta propiedad nos devuelve la longitud del array, es decir, el 
numero de elementos que puede almacenar. Su uso es muy simple: 

var lista = new Array(50); 

tamagno = lista.length; /*taraagno almacenaria el valor 50 */ 

prototype 

Esta es una propiedad muy potente en el sentido que nos permite agregar al objeto 
Array las propiedades y metodos que queramos. 

Array.protoype.descriptor = null; 
dias = new Array ('lunes', 'Martes', 'Miercoles', 'Jueves', 

'Viernes') ; 

dias.descriptor = "Dias laborables de la semana"; 

En este ejemplo hemos creado una nueva propiedad para el objeto array, la propiedad 
descriptor que podrfa utilizarse para darle un tftulo a la matriz. 

Metodos 


concat(objArray) 

Une el objeto Array con el array que se le pasa como argumento y devuelve el resultado 
en un nuevo array, sin modificar los arrays que se concatenan. 

join() 

Convierte los elementos de un array en una cadena separados por el caracter que se le 
indique. El separador por defecto es la coma. 

a= new Array("Hola","Buenos", "dias") ; 
document.write(a.join() +" <br>"); 
document.write(a.join(", ") +" <br>"); 

document.write(a.join(" + ") +" <br>") ; 

La salida de este programa serfa 
Hola,Buenos,Dias 
Hola, Buenos, Dias 
Hola+Buenos+Dfas 

reverse() 

Invierte el orden de los elementos de un Array en el propio array, sin crear uno nuevo. 

slice(ini, fin) 

Extrae parte de un Array devolviendolo en un nuevo objeto Array. 


26 




lista = new Array('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'); 

sublista = lista.slice(2, 6) ; 
alert(sublista.join()) ; 

En el ejemplo sublista contendra los elementos desde el fndice 2 al 5 ambos inclusive, o 
sea, 'c', 'd', 'e', 'f. Si se omite el segundo argumento se extrae hasta el ultimo elemento 
del array y si es negativo se entiende como contando desde el final. 

sort(rutord) 

Ordena alfabeticamente los elementos de un objeto Array. Opcionalmente podemos 
pasar como argumento una funcion para determinar el orden, esta funcion posee dos 
argumentos y devolvera un valor negativo si el primer argumento es menor que el 
segundo, cero si son iguales y un valor positivo si el primer argumento es mayor que el 
segundo. En castellano esto es necesario si queremos que la n y vocales acentuadas 
figuren en su lugar. 

B) Booleanos: Verdadero o Falso 

Las variables booleanas o logicas son las que solo pueden tomar dos valores: true, 
verdadero, y false, falso. Este tipo de variables esta implementado en JavaScript como 
un objeto. 

Metodos 

toString 

Si el valor es false devuelve la cadena "false" y si es true devuelve la cadena "true" 

valueOf 

Devuelve el valor booleano (true o false) 

Propiedades 

constructor 

heredada del objeto generico Object, devuelve la referencia al constructor: 
function Boolean() { [native code] } 

prototype 

Es una propiedad utilizada para asignar nuevos metodos o propiedades, heredado del 
objeto generico Object. Por ejemplo podemos traducir los valores true o false. 

function valor () { return this.valueOf()?'ciertofalso' } 

Boolean.prototype.valor = valor; 
var item = new Boolean(false); 
document.write(item.valor()); 

Con este ejemplo logramos que true se devuelva como la cadena "cierto" y false como 
la cadena "falso". 

C) Objeto Function 

Permite la creacion de funciones, ya sean con nombre o anonimas. La creacion de una 
funcion puede realizarse por el metodo tradicional y comun a la mayorfa de lenguajes de 
programacion: 

function sumar(a, b) 

{ 

return a+b; 

1 
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O bien mediane el conocido operador new: 

sumar = new Function ("a", "b", "return a+b"); 

En cualquier caso la funcion se usara de igual forma: 

document.write( sumar(90, 100) ); 

Metodos 

Los heredados del objeto Object 

Propiedades 

arguments 

Se trata de un array que contiene los argumentos pasados a la funcion. Esta propiedad 
permite el uso de funciones con un numero variable de argumentos. 

caller 

Contiene una referencia a la funcion que llamo a la actual. 

constructor 

Heredada de la clase Object 

D) Objeto Number 

Es el objeto destinado al manejo de datos y constantes numericas. Realmente no es 
habitual crear objetos de este tipo por cuanto JavaScript los crea automaticamente 
cuando es necesario. No obstante la sintaxis para su creacion es la habitual para 
cualquier objeto: 

minumero = new Number(valorinicial) 

El valor inicial es optativo, si no se usa el objeto se crea con valor null 

Metodos 

L os heredados del objeto Object 
Propiedades 

Ademas de las heredadas del objeto Object Number posee las siguientes propiedades: 

MAX_YALUE 

Indica el valor maximo utilizable por JavaScript, actualmente 1.79E+308. 

MIN_VALUE 

Indica el valor mmimo utilizable por JavaScript, actualmente 2.22E-308. 

NaN 

Una constante usada para indicar que una expresion ha devuelto un valor no numerico. 
NaN no puede compararse usando los operadores logicos habituales, para ver si un valor 
es igual a NaN se debe usar la funcion incorporada isNaN 
NEGATIVE_INFINITY 

Una constante para indicar infinite positivo, es decir, un valor superior al 
MAX_VALUE 

POSITIVE_INFINITY 

Una constante para indicar infinite negativo, es decir, un valor superior al 
MAX_VALUE con signo negativo 
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E) Objeto Object 


Pues si: existe un objeto llamado Object del que derivan todos los objetos de 
JavaScript, los predefinidos y los definidos por el usuario. Esto significa que los objetos 
usados en JavaScript heredan las propiedades y metodos de Object. 


Metodos 

toString 

Devuelve una cadena dependiendo del objeto en que se use 


Objeto 

Cadena devuelta por el metodo 

Array 

Los elementos del array separados por coma 

Boolean 

Si el valor es false devuelve "false" si no devuelve "true" 

Function 

La cadena "function nombre de funcion(argumentos){ [codigo]}" 

Number 

Representation textual del numero 

String 

El valor de la cadena 

Default 

"[object nombre del objeto]" 


valueOf 

Devuelve el valor del objeto dependiendo del objeto en que se use 


Objeto 

Valor que devuelve el metodo 

Array 

Una cadena formada por los elementos separados por coma 

Boolean 

El valor booleano (true o false) 

Date 

La fecha como el numero de milisegundos desde el 1/1/1970, 00:00 

Function 

La propia funcion 

Number 

El valor numerico 

String 

La cadena 

Default 

El propio objeto 


Propiedades 

constructor 

Esta propiedad contiene una referencia a la funcion que crea las instancias del objeto en 
particular. Por ejemplo: 

x = new String("Hola"); 

//En este caso s.constructor contendra 
// function String() { [native code] } 

prototype 

Es una propiedad utilizada para asignar nuevos metodos o propiedades a un objeto, 
elementos estos que seran heredados por las diferentes instancias de ese objeto. 
Ejemplo: 

Array.prototype.nombTipo = "matriz"; 
lista = new Array(9); 
document.write(lista.nombTipo); 

//Escribira la palabra matriz que es el nombTipo 
//que hemos dado para el objeto Array 

F) Objeto Regular Expession 

JavaScript usa este objeto para trabajar con patrones de expresiones regulares, estos 
patrones se crean como cualquier otro objeto mediante su inicializacion directo o bien 
mediante el constructor new RegExpO, como podemos ver en el ejemplo: 
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var mipatron = / A [aeiou]/gi 

var mipatron2 = new RegExp(" A [aeiou]", "gi") 


Ambas formas conducen al mismo patron, en este ejemplo define palabras que 
comienzan con una vocal. El patron puede llevar modificadores o flags para matizar la 
forma de buscar, en el ejemplo se usan dos: g i Estos modificadores tienen los 
siguientes sginficados: 


flags 

Significado 

g 

Explorar la cadena completa 

i 

No distinguir mayusculas de minusculas 

m 

Permite usar varios A y $ en el patron 

s 

Incluye el salto de lfnea en el comodfn punto . 

X 

Ignora los espacios en el patron 


Estos patrones poseen en total tres metodos exec(), test(), compile() ademas de los 
metodos ya citados del objeto String que tambien usan patrones como son: match(), 
replace(), search() y split(). La unica propiedad que funciona en estos objetos es la 
source que refleja el contenido del patron. En el patron pueden aparecer caracteres o 
grupos de caracteres encerrados entre parentesis, posteriormente podemos usar un 
indice para referirnos individualmente al contenido de esos parentesis. 

Por ejemplo vamos a sustituir por un - todas los digitos situados tras una letra en la 
cadena a explorar. 

var cadexp = "234879x089h9y7"; 
var patron = /([a-z])(\d)/ig; 
document.write(cadexp+'<br> '); 
cadexp = cadexp.replace(patron, "$2-"); 
document.write(cadexp) 

Como ves donde antes existfa un dfgito seguido de una letra ahora hay un dfgito seguido 
de un guion. Las coincidencias con el primer parentesis del patron estan en $1 y con el 
segundo en $2. La primera coincidencia hallada es xO, luego $1 contiene x y $2 
contiene 0, sustituyo lo hallado con -$2, o sea, quito $1 y pongo un guion y me quedara 
-0 en lugar de xO. Como se ha usado el flag g (global) esta operacion se realiza en toda 
la cadena. 

a) Metodos RegExp: Compile (cadpatr) 

Un patron de busqueda puede construirse mediante una simple asignacion o mediante el 
constructor new RegExp y ser utilizada tal cual, pero se puede mejorar bastante la 
busqueda usando este metodo que convierte el patron en un formato interno para 
optimizar su uso. Utiliza como argumento una cadena que representa la expresion 
regular que se quiere compilar 

var patron = new RegExp(); 
patron.compile("\\D-") ; 

var busq = patron.exec("1234u90t-789"); 
document.write('Buscando '+patron.sourcet'<br>*); 
document.write(busq [ 0]+' esta en la posicion ' + 
busq.index +' de busq.input'); 
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En este ejemplo se busca cualquier no numerico seguido de un guion en la cadena 
"1234u90t-789". Primero se declara la variable patron y se compila con el patron \D- 
que indica cualquier caracter no numerico seguido de guion. Por ultimo muestra el 
patron usado y los resultados de la busqueda: coincidencia encontrada, posicion y 
cadena explorada. 

b) Metodos RegExp: Exec (cadexplor) 

Este metodo busca la primera concordancia del patron con el contenido de la cadena de 
texto donde se busca, que se le pasa como argumento. Si no encuentra ninguna 
concordancia devuelve null, pero encuentra una secuencia de caracteres que se adapte al 
patron de busqueda devuelve un array cuyo primer elemento indica la concordancia 
encontrada y las restantes indican los resultados de acuerdo a los parentesis que 
aparezcan en la expresion regular. Ademas este array posee dos propiedades: index, 
para indicar la posicion de la subcadena encontrada, y input, que contiene la cadena de 
caracteres que se esta explorando. Ademas modifica las propiedades de una variable 
global RegExp con datos relativos a la busqueda. En el ejemplo que sigue buscamos 
cualquier letra seguida de un numero y de un guion, el patron de busqueda sera /[a..z]\d- 
/i, [a..z] representa todas las letras del abecedario, \d representa cualquier numero y el 
modificador i se usa para no diferenciar mayusculas de minusculas. 

patron = /[a..z]D\d-/i; 
var busca = new Array() 

busca = patron.exec("3c491a-9dld6-91br"); 
if (busca != null){ 

document.write("Concuerda en: "+busca.index + '<br>'); 
document.write("Explorando:" +busca.input + '<br>'); 
document.write("Hallado: " + busca[0] + '<br>'); 

} 

document.write("Resto " + RegExp.rightContext + '<br>'); 

c) Metodos RegExp: Test (cadexp) 

Este es el metodo mas simple del objeto expresion regular, tan solo comprueba si existe 
alguna coincidencia en la cadena explorada, pasada como argumento, con el patron de 
busqueda. Si existe tal coincidencia devuelve un valor booleano true y en caso contrario 
devuelve false. Ademas afecta a las propiedades del objeto global RegExp. 

var patron = new RegExp("Lunes", "gi") ; 

var cadexpl = "La reunion es el lunes o el martes."; 

var eslunes = patron.test(cadexpl); 

document. write (" £,Es el lunes? "+eslunes+' <br> ') ; 

document.write("Hallado en "+RegExp.index); 

En este sencillo ejemplo se comprueba si la cadena explorada, cadexpl, contiene la 
palabra "lunes", sin considerar la caja (mayusculas o minusculas). El resultado lo guarda 
en la variable eslunes. 

c) RegExp 

Se trata de una variable global usada por JavaScript cuando realiza operaciones donde 
intervengan expresiones regulares. Cada vez que se realiza una de estas operaciones se 
modifican las propiedades de esta variable. Es una variable que puede consultarse pero 
sobre la que se puede modificar directamente, es de solo lectura. No tiene ningun 
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metodo asociado y sus propiedades siempre hacen referencia a una operacion de 
busqueda, sea con los metodos de un objeto Regular Expresion o del objeto string. 

Propiedades 

$1..$9: 

Estos indices contienen las partes agrupadas con parentesis en el patron de busqueda. 

input 

Cadena que se ha explorado. 

lastmatch 

Ultima coincidencia encontrada. 

multiline 

Variable booleana que indica si la cadena explorada incluye saltos de lfnea. 

lastParen 

Ultima coincidencia encontrada con un patron entre parentesis. 

leftContext 

Toda la cadena hasta la coincidencia hallada. 

rightContext 

Toda la cadena desde la coincidencia hasta el final de la cadena. 

Estas propiedades solo son de lectura y son actualizadas cada vez que se realiza alguna 
busqueda con patron, sea con los metodos de una expresion regular o con los de String. 
En el siguiente ejemplo se puede observar estos valores tras una operacion de busqueda. 

var patron= /\D(\d)(\D)/g; 

var buscaren = "abde5fghj45oi"; 

var hallado = patron.exec(buscaren) ; 

var item; document.write("$1: "+RegExp.$l+"<br>") ; 

document.write("$2: "+RegExp.$2+"<br> "); 

document.write("input: "+RegExp.input+"<br> "); 

document.write("index: "+RegExp.index+"<br> "); 

document.write("lastlndex: "+RegExp.lastlndex+"<br> ") ; 

document.write("multiline: "+RegExp.multiline+"<br>"); 

document.write("lastMatch: "+RegExp.lastMatch+"<br>"); 

document.write("lastParen: "+RegExp.lastParen +"<br>"); 

document.write("leftContext: "+RegExp.leftContext +"<br>"); 

document.write("rightContext:"+RegExp.rightContext+"<br>"); 

Si pruebas este ejemplo con MSIExplorer y Netscape podras ver que no todas estas 
propiedades son reconocidas por ambos navegadores: Netscape y MSIexplorer. 

G) Objeto String 

El objeto String se usa para manipular cadenas de caracteres. En JavaScript todo texto 
encerrado entre comillas, dobles o simples, se interpreta como una cadena, asf '45' no es 
el numero cuarenta y cinco sino la cadena formada por los caracteres 4 y 5. El objeto 
String permite realizar operaciones con cadenas como concatenar o dividir cadenas, 
buscar texto, extraer parte de un texto, etc.. La operacion de crear una variable de este 
tipo se lleva a cabo como es habitual con el operador new pudiendole pasar un 
argumento para inicializar la variable. A1 usar un metodo o referimos a una propiedad 
podemos usar el nombre de la variable o una constante de cadena asi el ejemplo 

var mitexto = "Esta es una cadena"; 
var pos = mitexto.indexOf("una") 

puede tambien escribirse en la siguiente forma: 

var pos = "Esta es una cadena". indexOf("una"); 
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Metodos 


anchor 

fromCharCode 

small 

big 

indexOf 

split 

blink 

italics 

strike 

bold 

lastindexOf 

sub 

charAt 

link 

substr 

charCodeAt 

match 

substring 

concat 

replace 

sup 

fixed 

search 

toLowerCase 

fontcolor 

slice 

toUpperCase 

fontsize 




Propiedades 

length: devuelve la longitud de la cadena. 

prototype: permite agregar metodos y propiedades al objeto 

a) Metodos de String: anchor(atrcad) 

Este metodo crea, a partir de un objeto String, una cadena conteniendo un elemento 
HTML ANCHOR, con el atributo NAME igual a la cadena que se le pase en atrcad. 

var refer = "Referenda num. 1" ; 
var anda = refer. anchor ("Referl") ; 

El valor de la variable ancla sera: 

<A NAME="Referl">Referencia num. l</a> 

La sintaxis de este metodo permite usar una constante String en lugar del nombre de un 
objeto String. El ejemplo anterior podrfa haber escrito como: 

var anda = "Referenda num. 1". anchor ("Ref erl") ; 


b) Metodos de String: big() 

Este metodo devuelve una cadena consistente en el objeto String rodeado con las 
etiquetas <BIG> </BIG> del lenguaje HTML. Por ejemplo: 

var mitexto = "Este es el texto"; 
mitexto = mitexto.big (); 

Tras la ultima sentencia la variable mitext contendra 

<big>Este es el texto</big> 

Se puede usar una constante de cadena en lugar de un nombre de variable, asf el 
ejemplo podrfa haberse escrito: 

var mitexto = "Este es el texto".big() ; 

c) Metodos de String: blink() 

Este metodo devuelve una cadena consistente en el String rodeado con las etiquetas 
<blinkx/blink> del lenguaje HTML. Por ejemplo: 

var mitexto = "Texto para intermitente"; 
mitexto = mitexto.blink (); 

Tras la ultima sentencia la variable mi texto contendra el valor: 

<blink>Texto para intermitente</blink> 
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d) Metodos de String: bold() 


Este metodo devuelve una cadena consistente en el String rodeado con las etiquetas 
<B> </B>, negrita, del lenguaje HTML. Por ejemplo: 

var mitexto = "Texto para negrita"; 
mitexto = mitexto.bold() ; 

Tras la ultima sentencia la variable mi texto contendra el valor: 

<B>Texto para negrita</B> 

e) Metodos de String: charAt(atrent) 

Este metodo aplicado a una cadena devuelve el caracter que se encuentra en la posicion 
dada por el atributo atrent, teniendo en cuenta que el indice del primer caracter a la 
izquierda de la cadena es 0 y el ultimo es una unidad menor que longitud de la cadena. 

Si el valor del atributo no es valido (igual o mayor que la longitud de la cadena o 
negativo) el metodo devuelve el valor undefined. Por ejemplo el siguiente codigo 
devuelve la posicion del tercer caracter de la cadena nombre: 
var nombre = "abodefghij"; 
var car3 = nombre.charAt(2); 

Devolvera "c", que es el tercer caracter por la izquierda (indice igual a 2). 

f) Metodos de String: charAt(atrent) 

Este metodo aplicado a una cadena devuelve el codigo Unicode del caracter que se 
encuentra en la posicion dada por el atributo atrent, teniendo en cuenta que el indice del 
primer caracter a la izquierda de la cadena es 0 y el ultimo es una unidad menor que 
longitud de la cadena. Si el valor del atributo no es valido (igual o mayor que la 
longitud de la cadena o negativo) el metodo devuelve el valor NAN. Por ejemplo el 
siguiente codigo devuelve el Unicode del tercer caracter de la cadena nombre: 

var nombre = "abcdefghij"; 
var car3 = nombre.charAt(2); 

Devolvera 99, que es el codigo de la letra 'c', el tercer caracter por la izquierda (indice 
igual a 2). 

g) Metodos de String: concat(atrcad) 

Este metodo aplicado a una cadena le agrega la cadena pasada como atributo, atrcad, 
que sera una variable o constante literal, cualquier otro tipo es convertido a cadena. Por 
ejemplo el siguiente codigo concatena 'Buenos ' y 'dias': 

var saludo = "Buenos 

var hola = saludo.concat("dias"); 

La variable hola contendra "Buenos dias", es lo mismo que si se hubiera escrito: 

var hola = saludo + "dias" 


h) Metodos de String: fixedQ 
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Este metodo devuelve una cadena consistente en el objeto String rodeado con las 
etiquetas <TT> </TT>, espaciado fijo o teletype, del lenguaje HTML. Por ejemplo: 

var mitexto = "Este es el texto"; 
mitexto = mitexto.fixed() ; 

Tras la ultima sentencia la variable mitext contendra 

<TT>Este es el texto</TT> 

Se puede usar una constante de cadena en lugar de un nombre de variable, as! el 
ejemplo podrfa haberse escrito: 

var mitexto = "Este es el texto".fixed(); 

i) Metodos de String: fontcolor(atrcad) 

Este metodo crea, a partir de un objeto String, una cadena conteniendo un elemento 
FONT del lenguaje HTML con el atributo COLOR igual a la cadena que se le pase en 

atrcad. 

var mitexto = "Texto en color" ; 
mitexto = mitexto.fontcolor("#FFAC3E"); 

El valor de la variable ancla sera: 

<FONT COLOR="#FFAC3E">Texto en color</FONT> 

La sintaxis de este metodo permite usar una constante String en lugar del nombre de un 
objeto String. El ejemplo anterior podria haber escrito como: 

var mitexto = "Texto en color".fontcolor("#FFAC3E"); 


j) Metodos de String: fontsize(atrnum) 

Este metodo crea, a partir de un objeto String, una cadena conteniendo un elemento 
FONT del lenguaje HTML con el atributo SIZE igual al valor entero que se le pase en 

atrnum. 

var mitexto = "Texto de prueba" ; 
mitexto = mitexto.fontsize(-1) ; 

El valor de la variable mitexto sera: 

<FONT SIZE="-1">Texto de prueba</FONT> 

La sintaxis de este metodo permite usar una constante String en lugar del nombre de un 
objeto String. El ejemplo anterior podria haber escrito como: 

var mitexto = "Texto de prueba".fontsize (-1); 

k) Metodos de String: fromCharCode( codl, cod2,...) 

Este es un metodo global del objeto String que crea una cadena a partir de los codigos 
Unicode que se le pasen como parametros. Por ejemplo: 

var cadena = String.fromCharCode(65,66,67); 

La variable cadena contendra "ABC", que son los caracteres con los codigos 65, 66 y 
67. 


1) Metodos de String: indexOf( atrcad, desde) 
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Este metodo devuelve la primera posicion dentro del objeto String donde comienza la 
subcadena pasada como argumento en atrcad. Admite un segundo argumento opcional 
que indica desde que posicion debe realizar la busqueda, si se omite comienza a buscar 
por el primer caracter de la izquierda. Yalores del segundo argumento negativos o 
mayores que la longitud de la cadena se consideran 0. Si la subcadena no se encuentra el 
valor devuelto es -1. Por ejemplo: 

var cadena = "mi.correo@mail.com"; 
var arroba = cadena.indexOf('@'); 
var punto = cadena.indexOfarroba); 

Este ejemplo devuelve en arroba la posicion 9 mientras que punto contiene la 14 pues 
la busqueda se hizo desde la posicion donde esta el caracter arroba y encuentra el 
segundo punto. Recuerda que las posiciones en las cadenas se cuentan desde 0. 

m) Metodos de String: italics() 

Este metodo devuelve una cadena consistente en el String rodeado con las etiquetas <I> 
</I>, cursivas, del lenguaje HTML. Por ejemplo: 

var mitexto = "Texto en cursiva"; 
mitexto = mitexto.italics (); 

Tras la ultima sentencia la variable mi texto contendra el valor: 

<I>Texto en cursiva</I> 

n) Metodos de String: lastIndexOf(atrcad, desde) 

Este metodo devuelve la primera posicion dentro del objeto String donde comienza la 
subcadena pasada como argumento en atrcad, pero realizando la busqueda de derecha a 
izquierda. Admite un segundo argumento opcional que indica desde que posicion debe 
realizar la busqueda, si se omite comienza a buscar por el primer caracter de la derecha, 
valores negativos o mayores que la longitud de la cadena se consideran 0. Si la 
subcadena no se encuentra el valor devuelto es -1. Por ejemplo: 

var cadena = "mi.correo@mail.com"; 

var arroba = cadena.lastlndexOf('@') ; 

var punto = cadena.lastlndexOfarroba); 

Este ejemplo devuelve en arroba la posicion 9 mientras que punto contiene la 2 pues la 
busqueda se hizo desde la posicion donde esta el caracter arroba hacia el principio de la 
cadena encontrando el primer punto. Recuerda que las posiciones en las cadenas se 
cuentan desde 0. 

o) Metodos de String: link(atrcad) 

Este metodo crea, a partir de un objeto String, una cadena conteniendo un elemento 
ANCHOR del lenguaje HTML, con el atributo HREF igual a la cadena que se le pase en 

atrcad. 

var enlace = "Direccion" ; 

enlace = enlace.link("http://www.ciudadfutura.com') ; 

El valor de la variable enlace sera: 

<A HREF="http://www.ciudadfutura.com">Direccion</a> 
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La sintaxis de este metodo permite usar una constante String en lugar del nombre de un 
objeto String. El ejemplo anterior podria haber escrito como: 

var enlace = "Direccion".anchor("Referl"); 

p) Metodos de String: match( expreg ) 

Este es uno de los mas potentes metodos para buscar subcadenas y realizar sustituciones 
dentro de cadenas de texto. Permite usar patrones de busqueda construidos con 
comodines y texto, lo que se denominan expresiones regulares. Este metodo usa como 
argumento una expresion regular y va buscando en el objeto alguna subcadena que 
concuerde con esa expresion. Esta subcadena la devuelve en un array. Si no encuentra 
ninguna devuelve null. Ademas actualiza el valor de una variable global RegExp que 
almacena en sus propiedades diversa information acerca de la busqueda realizada. Por 
ejemplo: 

var frase = new String(); 

frase="Busco palabras con menos de cinco letras"; 

var result=new Array(); 

result=frase.match(/\b\w{1,4}\b/g); 

document.write("Hallados: '+result+'<br>'); 

document.write("En la frase: " + RegExp.input); 

Si pruebas el ejemplo obtendras el siguiente listado 

Hallados: con,de 

En la frase: Busco palabras con menos de cinco letras 

El patron de busqueda esta encerrado entre dos barras /, y busca caracteres 
alfanumericos (\ w ) comprendidos entre lfmites de palabras (\ b ) ademas hace una 
busqueda global (indicado por la g fuera de las barras). 

q) Metodos de String: replace ( expreg, nueva) 

A vueltas con las expresiones regulares, dificiles pero potentes. Con este metodo todas 
las cadenas que concuerden con la expreg del primer argumento son reemplazadas por 
la cadena especificada en el segundo argumento, nueva, que puede contener elementos 
del patron mediante los s fm bolos $1 a $9. El resultado devuelto es la cadena con las 
sustituciones realizadas. Por ejemplo vamos a cambiar palabra por frase en la frase 
"Cada palabra dicha es una palabra falsa" 

var linea = new String(); 

linea="Cada palabra dicha es una palabra falsa"; 
linea = linea.replace(/palabra/g, "frase"); 
document.write(linea) ; 

Si pruebas el ejemplo obtendras lo siguiente 

Cada frase dicha es una frase falsa 

En esta ocasion se ha usado un patron con el modificador g de global por lo que cambia 
todas las coincidencias, si se omite solo se cambia la primera. En la cadena nueva 
pueden usarse elementos del patron, por ejemplo cambiemos las negritas a cursivas en 
la frase: 

var patron = / (<b>) ([ A <]+) (<\/b>)/g; 

var frase = "Cada <b>negrita</b> pasa a <b>italica</b>"; 

document.write(frase+"<br>"); 

newstr = str.replace(patron, "<i>$2</i>"); 

document.write(frase); 
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veras la frase antes y despues del cambio: 

Cada negrita pasa a italica 
Cada negrita pasa a italica 

El $2 es un fndice referido a los parentesis del patron, asf $1 indica lo contenido en el 
primer parentesis (<b>) mi entras que $3 es <\b>, el tercer parentesis. 

r) Metodos de String: search ( expreg ) 

Es un metodo similar al metodo match pero mas rapido. Este metodo realiza una 
busqueda en la cadena y devuelve el fndice donde se produce la primera concordancia 
con el patron o -1 si no existe ninguna. Por ejemplo buscamos las cadenas 'lunes' o 
'martes' en la frase cita, la letra i del patron indica que se debe ignorar el tipo 
mayusculas o minusculas en la busqueda: 

var patron = /sabado|miercoles/i; 

var cita = "La reunion sera el lunes y el miercoles"; 
document.write(cita.search(patron)+"<br>"); 

Si pruebas el ejemplo obtendras un 30, la posicion de la palabra 'lunes'. 

s) Metodos de String: slice (inicio, ultimo ) 

Este metodo devuelve la porcion de cadena comprendida entre las posiciones dadas por 
los argumentos inicio y ultimo, o el final de la cadena si se omite este segundo 
argumento. Si ultimo es negativo, se interpreta como numero de posiciones contadas 
desde el final de la cadena. Si los argumentos no son numeros enteros, por ejemplo 
cadenas, se convierten a numeros enteros como harfa el metodo Number.parselnt(). 

var frase = "Autor: Luis Sepulveda"; 
var nombre = frase.slice(7); 

La variable nombre contendra "Luis Sepulveda". En este otro ejemplo usamos un 
segundo argumento: 

var frase = "Autor: Luis Sepulveda"; 
var nombre = frase.slice(7, -10); 

nombre contendra "Gonzalo"', es decir desde la posicion 7 hasta 10 posiciones antes del 
final. 

t) Metodos de String: small() 

Este metodo devuelve una cadena consistente en el objeto String rodeado con las 
etiquetas <SMALL> </SMALL>, reducir tamano, del lenguaje HTML. Por ejemplo: 

var mitexto = "Este es el texto"; 
mitexto = mitexto.small(); 

Tras la ultima sentencia la variable mitext contendra 

<SMALL>Este es el textoc/SMALL> 

Se puede usar una constante de cadena en lugar de un nombre de variable, asf el 
ejemplo podrfa haberse escrito: 

var mitexto = "Este es el texto".small(); 
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u) Metodos de String: split (separ) 


Devuelve un array conteniendo las porciones en que queda separada la cadena por el 
separador indicado mediante el argumento separ, que sera una expresion regular o una 
cadena literal. Si este separador es una cadena vacia el texto queda desglosado en todos 
sus caracteres. Si se omite el separador el resultado es un array de un elemento con la 
cadena completa. 

var linea=new String("Titulo: El portero"); 
var lista = linea.split (/:\s*/); 

La variable lista es un array con dos elementos "Titulo" y "El portero". Tambien 
podriamos haberlo escrito como 

var linea=new String("Titulo: El portero"); 
lista = linea.split; 
document.write(lista) ; 

en este caso el primer elemento de lista es "Titulo" y el segundo " El portero" con un 
espacio por delante. Por ultimo si el separador es una cadena vacia: 

var linea=new String("Titulo: El portero"); 
lista = linea.split(""); 
document.write(lista) ; 

la variable lista contendra T,i,t,u,l,o,:, ,E,1, ,p,o,r,t,e,r,o. 

v) Metodos de String: strike() 

Este metodo devuelve una cadena consistente en el String rodeado con las etiquetas 
<STRIKE> </STRIKE>, tachado, del lenguaje HTML. Por ejemplo: 

var mitexto = "Texto para ver tachado"; 
mitexto = mitexto.strike() ; 

Tras la ultima sentencia la variable mi texto contendra el valor: 

<STRIKE>Texto para ver tachado</STRIKE> 

w) Metodos de String: sub() 

Este metodo devuelve una cadena consistente en el objeto String rodeado con las 
etiquetas <SUB> </SUB>, subindice, del lenguaje HTML. Por ejemplo: 

var mitexto = "Este es el texto"; 
mitexto = mitexto.sub (); 

Tras la ultima sentencia la variable mitext contendra 

<SUB>Este es el texto</SUB> 

Se puede usar una constante de cadena en lugar de un nombre de variable, asi el 
ejemplo podrfa haberse escrito: 

var mitexto = "Este es el texto".sub(); 

x) Metodos de String: substr(inicio, largo) 

Devuelve una subcadena extraida del objeto string comenzando por la posicion dada por 
el primer argumento, inicio, y con un numero de caracteres dado por el segundo 
argumento, largo. Si se omite este ultimo argumento la subcadena extraida va desde 
inicio hasta el final de la cadena. 

vat linea=new String("Mi pagina es ideal); 
var lista = linea.substr(3); 
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La variable lista contendra "pagina es ideal". 

var linea=new String("Mi pagina es ideal); 
var lista = linea.substr(3, 6); 

ahora la variable lista contendra "pagina". 

y) Metodos de String: substring(indl,ind2) 

Devuelve una subcadena del objeto string que comienza en la posicion dada por el 
menor de los argumentos y finaliza en la posicion dada por el otro argumento. Si se 
omite este ultimo argumento la subcadena extrafda va desde la posicion indicada por el 
unico argumento hasta el final de la cadena. Si los argumentos son literales se 
convierten a enteros como un parselnt(). 

var linea=new String("Mi pagina es ideal); 
var lista = linea.substr(3); 

La variable lista contendra "pagina es ideal". 

var linea=new String("Mi pagina es ideal); 
var lista = linea.substr(3, 9); 

ahora la variable lista contendra "pagina", al igual que en 

var linea=new StringC'Mi pagina es ideal); 
var lista = linea.substr (9, 3); 

z) Metodos de String: sup() 

Este metodo devuelve una cadena consistente en el objeto String rodeado con las 
etiquetas <SUP> </SUP>, superfndice, del lenguaje HTML. Por ejemplo: 

var mitexto = "Este es el texto"; 
mitexto = mitexto.sup (); 

Tras la ultima sentencia la variable mitexto contendra 

<big>Este es el texto</big> 

Se puede usar una constante de cadena en lugar de un nombre de variable, asf el 
ejemplo podrfa haberse escrito: 

var mitexto = "Este es el texto".sup(); 

aa) Metodos de String: toLowerCase() 

Devuelve una cadena igual a la original pero con todos los caracteres en minusculas. No 
afecta como es logico a caracteres no alfabeticos, o sea, a los numeros, letras acentuadas 
y caracteres especiales como la N 

var linea=new StringC'Hoy es Domingo"); 
linea = linea.toLowerCasesubstr() ; 

La variable lista contendra "hoy es domingo". 

bb) Metodos de String: toUpperCase() 

Devuelve una cadena igual a la original pero con todos los caracteres en mayusculas. 

No afecta como es logico a caracteres no alfabeticos, o sea, a los numeros, letras 
acentuadas y caracteres especiales como la N. Es muy util a la hora de comparar 
cadenas para asegurarse que dos cadenas no difieran solo por que algun caracter este en 
mayuscula o minuscula. 
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var linea=new StringC'Hoy es Domingo"); 
linea = linea.toUpperCase(); 

La variable lista contendra "HOY ES DOMINGO". 

H) Objeto Date 

El objeto Date contiene un valor que representa fecha y hora de un instante dado. Para 
crear una instancia de este objeto usamos alguna de las siguientes sintaxis: 
var fecha= new Date() 

var fecha= new date(numero) 
var fecha= new date(cadena) 
var fecha= 

new date(ano, mes, dia[, hora[, minutos[, seg[,ms]]]]) 

Los argumentos encerrados entre corchetes son opcionales. En la primera forma la 
variable fecha contendra la fecha del dfa actual. La segunda opcion almacena en fecha 
la fecha dada por el argumento como el numero de milisegundos transcurridos desde la 
media noche del 1 de Enero de 1970. El tercer tipo se usa cuando la fecha se pasa en 
forma de cadena. Por ultimo la fecha puede crearse pasandole como argumento los 
numeros de ano, mes, dfa, hora y opcionalmente, hora, minuto, segundo y milisegundo. 
Los anos posteriores a 1970 puede escribirse con dos dfgitos, pero es aconsejable usar 
siempre cuatro dfgitos por aquello de los efectos 2000. 

var hoy = new date() /*fecha del dia en hoy */ 

var evento = new Date("November 10 1990"); 

var otro = new Date("10 Nov 1990"); 

var otro = new Date("10/02/2000"); //Oct, 2, 2000 

var instante = new Date(1990, 11, 10, 20,00); 

Estas son tres posibles formas de declarar objetos de tipo fecha. Las dos ultimas 
almacenan el mismo dfa, pero en la ultima ademas se guarda la hora. 

Donde se usen cadenas para indicar una fecha podemos anadir al final las siglas GMT 
(o UTC) para indicar que la hora se refiere a hora del meridiano Greenwich, si no se 
toma como hora local, o sea, segun la zona horaria configurada en el ordenador donde 
se ejecute el script. 

Metodos 


getDate 

parse 

getDay 

setDate 

getFullYear 

setFullYear 

getHours 

SetHours 

getMilliseconds 

setMilliseconds 

getMinutes 

setMinutes 

getMonth 

setMonth 

getSeconds 

setSeconds 

getTime 

setTime 

getTimezoneOffset 

setYear 

get Year 

toGMT 

Object.toString 

toLocaleString 

Object.valueOf 

toUTCString 


a) Metodos de Date: getDateQ 
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Nos devuelve el dfa del mes del objeto fecha al que se aplica. Este metodo controla por 
supuesto el numero de dfas de cada mes y contempla el caso de anos bisiestos, incluida 
la exception del 2000. En el siguiente ejemplo se presenta en pantalla Hoy es dfa 2, 
suponiendo que la fecha del sistema es 2-10-200. Primero creamos la variable fecha 
instanciada como un objeto Date() para a continuation escribir directamente el valor de 
getDate() aplicado a fecha 

var fecha = new Date(); 

document.write("Hoy es dia: "tfecha.getDate ()); 


b) Metodos de Date: getDayO 

Nos devuelve el dfa de la semana del objeto fecha al que se aplica en forma numerica 
con una cifra entre 0 para el domingo y 6 para el sabado. En el siguiente ejemplo se 
presenta en pantalla Hoy es 1, suponiendo que la fecha del sistema es 2-Octubre-2000, o 
sea, lunes. Primero creamos la variable fecha instanciada como un objeto Date() para a 
continuacion escribir directamente el valor de getDayO aplicado a fecha 

var fecha = new Date(); 

document.write("Hoy es "tfecha.getDay()); 

Si echamos manos de un array podemos mejorar un poquito este ejemplo presentando el 
nombre del DIA de la semana: 

var fecha = new Date(); 

var diaSemana = new Array('domingo', 'lunes', 'martes', 

'miercoles', 'jueves', 'viernes','sabado'); 

var dia = fecha.getDay(); 

document.write("Hoy es "tdiaSemana[dia]); 

Ahora se obtendrfa la mas amigable frase Hoy es lunes. 

c) Metodos de Date: getFullYear() 

Nos devuelve el ano correspondiente del objeto fecha en formato completo es decir 
incluyendo el siglo. Asf si la fecha contiene 2-Octubre-2000, esta funcion nos dara 
2000. Por ejemplo creemos la variable fecha instanciada como un objeto Date() para a 
continuacion se presenta directamente el valor de getFullYear() aplicado a fecha, o sea, 
2000 . 

var fecha = new Date(); 

document.write("El ano actual es "tfecha.getFullYear()); 

Este metodo evita el efecto 2000 al presentar loa anos siempre con cuatro dfgitos. 

d) Metodos de Date: getHours() 

Nos devuelve la seccion horas en formato 0-24 almacenada en la parte dedicada a la 
hora del objeto fecha al que se aplica. Asf si la fecha contiene 12:40:00, esta funcion nos 
dara 12, pero si contiene 5:40:00 nos dara 17. Igualmente el metodo interpreta los 
modificadores am / pm pero siempre devuelve la hora en formato de 24 horas. Por 
ejemplo creemos la variable fecha instanciada como un objeto Date(), si son las 
17:30:10 el valor de getHoursr() presentara 17. 

var fecha = new Date(); 

document.write("Son las "tfecha.getHours()t" horas."); 

Puedes probar que ocurre con otros valores sin necesidad de cambiar la fecha y hora del 
sistema de la siguiente manera: 


42 


var fecha = new Date ("10-02-2000 08:20:00 pm"); 
document.write("Son las "+fecha.getHours()+" horas."); 

Este caso presentara en pantalla Son las 20 horns 

e) Metodos de Date: getMilliseconds() 

Nos devuelve los minutos de la seccion dedicada a la hora almacenada en el objeto 
fecha al que se aplica. Asi si la fecha contiene en su parte de hora 12:40:08:640, esta 
funcion nos dara 640. Por ejemplo creemos la variable fecha instanciada como un objeto 
Date(), si son las 17:30:08:550 el valor de getMilliseconds() presentara 550. 

var fecha = new Date(); 

document.write("Son las "+fecha.getHours() ); 

document.write(":" + fecha.getMinutes() ); 
document.write(":" + fecha.getSeconds() ); 

document.write(":" + fecha.getMilliseconds()); 

Esta funcion esta presente en JScript de Microsoft y en ECMAScript pero no es 
soportada por Netscape. 

f) Metodos de Date: getMinutes() 

Nos devuelve los minutos de la seccion dedicada a la hora almacenada en el objeto 
fecha al que se aplica. Asi si la fecha contiene en su parte de hora 12:40:08, esta funcion 
nos dara 24. Por ejemplo creemos la variable fecha instanciada como un objeto Date(), 
si son las 17:30:08 el valor de getMinutes() presentara 8. 

var fecha = new Date(); 

document.write("Son las "+fecha.getHours() ); 

document.write(":" + fecha.getMinutes() ); 

document.write(":" + fecha.getSeconds() ); ; 

Si queremos que quede mas presentable podemos completar con ceros por la izquierda 
cuando el numero (de horas, minutos o segundos) sea menor que 10. Esto es tan facil 
como se ve en el ejemplo: 

var fecha = new Date(); 
var horas = fecha.getHours(); 
var mins = fecha.getMinutes(); 
var segs = fecha.getSeconds(); 
horas = (horas < 10)?"0"+horas:horas; 
mins = (mins < 10)?"0"+mins:mins; 
segs = (segs<10)?"0"+segs:segs; 
document.write("Son las "+horas); 
document.write(":" + mins); 
document.write(":" + segs); 

g) Metodos de Date: getMonth() 

Nos devuelve en forma numerica el mes correspondiente al objeto fecha al que se 
aplica. Asi para la fecha correspondiente al 10/0ct/2000, esta funcion nos dara 10, el 
numero de orden de Octubre. Por ejemplo creemos la variable fecha instanciada como 
un objeto Date(), 

var fecha = new Date(); 

document.write("Este mes es el "+fecha.getMonth() ); 
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Si queremos que aparezca el nombre del mes en lugar del numero debemos crear 
primero un array de doce elementos y rellenarlos con los nombres de los meses, luego 
usamos el resultado de getMonth() como indice a ese array 

var array = new meses(); 

var fecha = new Date(); 

var nmes = fecha.getMonth(); 

mes[l] = "Enero"; 

mes[2] = "Febrero"; 

mes[3] = "Marzo"; 

mes [4] = "Abril"; 


document.write("Mes actual:" + meses[nmes]); 

h) Metodos de Date: getSecondsQ 


Nos devuelve los segundos de la seccion dedicada a la hora almacenada en el objeto 
fecha al que se aplica. Asi si la fecha contiene en su parte de hora 12:40:08, esta funcion 
nos dara 8. Por ejemplo creemos la variable fecha instanciada como un objeto Date(), si 
son las 17:30:08 el valor de getSeconds() presentara 8. 
var fecha = new Date(); 

document.write("Son las "+fecha.getHours() ); 

document.write(":" + fecha.getMinutes() ); 
document.write(":" + fecha.getSeconds() ); ; 

Si queremos que quede mas presentable podemos completar con ceros por la izquierda 
cuando el numero (de horas, minutos o segundos) sea menor que 10. Esto es tan facil 
como se ve en el ejemplo: 

var fecha = new Date(); 
var horas = fecha.getHours(); 
var mins = fecha.getMinutes(); 
var segs = fecha.getSeconds(); 
horas = (horas < 10)?"0"+horas:horas; 
mins = (mins < 10)?"0"tmins:mins; 
segs = (segs<10)?"0"+segs:segs; 
document.write("Son las "thoras); 
document.write(":" + mins); 
document.write(":" + segs); 


i) Metodos de Date: getTime() 

Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970 
hasta la hora almacenada en el objeto fecha al que se aplica. En el ejemplo que sigue 
creamos un objeto Date con la fecha actual, a continuacion escribimos el numero de 
milisegundos dado por este funcion, veras que este numero habitualmente es muy 
grande, realmente esta funcion puede ser util para calcular el tiempo transcurrido entre 
dos instantes, por ejemplo en un puzzle podrfa ser util para calcular el tiempo que el 
jugador emplea en resolver el puzzle, restando el getTime() obtenido al final del juego 
del getTime() obtenido al inicio. 

var ahora = new Date(); 
document.write(ahora.getTime()); 
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j) Metodos de Date: getTimezoneOffsetQ 


Esta funcion nos da la diferencia horaria en minutos del ordenador con respecto al 
meridiano de Greenwich. El valor depende por tanto de la zona o huso horario para el 
que este configurado el ordenador, pudiendo ser negativo o positivo segun este en la 
zona oriental u occidental. El ejemplo que muestra el uso de la funcion define la 
variable ahora con la fecha actual y devuelve en mi nutos la diferencia horaria con la 
GMT, el resultado depende de tu ordenador. 

var ahora = new Date(); 

document.write(ahora.getTimezoneOffset()); 

k) Metodos de Date: getYear() 

Nos devuelve en forma numerica el mes correspondiente al objeto fecha al que se 
aplica. Asf para la fecha correspondiente al 10/0ct/2000, esta funcion nos dara 2000 en 
Explorer y 100 en Netscape. Por ejemplo creamos la variable fecha instanciada como 
un objeto Date(), y luego extraemos el ano 

var fecha = new Date(); 

document.write("Este ano es el "+fecha.getYear()); 

Si pruebas este ejemplo en Netscape y en Internet Explorer veras que este ultimo da el 
ano con cuatro dfgitos mientras que el primero elimina el siglo. 

l) Metodos de Date: Object.toStringO 

m) Metodos de Date: Object.valueOf() 

Los casos Object.toString, y Object.valueOf, ya fueron explicados en el apartado E) 

Objeto Object. 

n) Metodos de Date: parse(fecha) 

Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970 
00:00:00 hasta la hora pasada en el argumento fecha como una cadena de caracteres. 
Este metodo es un metodo global del objeto y por tanto no es necesario crear un objeto 
Date para usarlo, como vemos en este ejemplo. 

var transcurridos = Date.parse("1/1/2000 00:00:00"); 
document.write(transcurridos); 


o) Metodos de Date: setDate(diames) 

Nos permite cambiar el dfa del mes del objeto fecha al que se aplica para poner el valor 
que se pasado en el argumento diames. Este metodo controla por supuesto el numero de 
dfas de cada mes y contempla el caso de anos bisiestos, incluida la excepcion del 2000, 
de forma que si pasamos como argumento 31 y el mes es de 30 dfas la funcion corrige 
la fecha completa pasandola al dfa 1 del mes siguiente. Esto lo vemos en el ejemplo que 
sigue: creamos una variable como un objeto Date con el ultimo dfa de Septiembre (mes 
de 30 dfas) e intentamos poner el dfa a 31, luego comprobamos la fecha almacenada: 

var fecha = new Date("l Sep 2000"); 
fecha.setDate (31); 

document.write("Hoy es dia: "tfecha.toString()); 

Como veras si pruebas el ejemplo la fecha es corregida y pasa a 1 de Octubre. 
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p) Metodos de Date: setFullYearQ 


Nos permite cambiar el ano del objeto fecha por el valor pasado como argumento, un 
numero interpretado como ano completo, o sea, que para poner el ano 1995 se debe 
pasar 1995, no el 95. El ejemplo pone precisamente este valor en el campo ano de la 
variable fecha. 

var fecha = new Date(); 
fecha.setFullYear(1995) 
document.write(fecha.toString()) ; 

Como el ano es de cuatro dfgitos no hay problema de efecto 2000. 

q) Metodos de Date: setHours() 

Nos permite modificar la hora almacenada en el objeto fecha al que se aplica y poner la 
que se pasa como argumento. Logicamente este argumento estara entre 0 y 24, aunque 
si se usa un valor fuera de este rango la fecha es corregida en consecuencia. Por ejemplo 
si intentamos poner la hora en 30 la fecha se adelanta 24 horas y se pone en las 6 horas, 
cambiando ademas el dfa. Igualmente si se usa un numero negativo en el argumento se 
toma como horas antes de la ultima media noche del mismo dfa. Observa todo esto en el 
ejemplo, donde al final de cada accion se presenta la fecha completa en forma de 
cadena: 

var fecha = new Date ("10 Sep 2000 00:00:00"); 
var nl="<br>"; 
fecha.setHours(20); 

document.write("A las 20: "+fecha.toString()+nl); 
fecha.setHours (30); 

document.write("A las 30: "tfecha.toString()+nl); 
fecha.setHours (-2); 

document.write("A las -2: "tfecha.toString ()tnl); 

r) Metodos de Date: setMilliseconds() 

Nos permite modificar el numero de milisegundos de la hora almacenada en el objeto 
fecha al que se aplica, poniendo los milisegundos al valor pasado como argumento. 
Habitualmente el argumento estara comprendido entre 0 y 1000. 

var fecha = new Date ("10 Sep 2000 00:00:00"); 

var nl="<br>"; 

fecha.setMilliSeconds(900); 

document.write(fecha.toString()tnl); 

s) Metodos de Date: setMinutes(minact) 

Nos permite ajustar los minutos de la seccion dedicada a la hora almacenada en el 
objeto fecha al que se aplica. El nuevo valor para los minutos se pasa como argumento, 
que habitualmente estara entre 0 y 59, aunque un valor fuera de este rango no da error 
sino que ajusta el resto de la hora. Asf 68 en el argumento adelanta el reloj una hora 
pone los minutos a 8, mientras que un -4 pone los minutos a 56 (60 menos 4). Puedes 
ver lo que ocurre en este ejemplo 

var fecha = new Date ("10 Sep 2000 00:00:00"); 

var nl="<br>"; 

fecha.setMinutes (20); 

document.write("Minact 20: "tfecha.toString ()+nl); 
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fecha.setMinutes (68); 

document.write("Minact 68: "tfecha.toString()+nl); 
fecha.setMinutes (-4); 

document.write("Minact -4: "+fecha.toString()+nl); 

Como ves si es necesario, se ajusta la hora cuando el numero de minutos supera el valor 
59 

t) Metodos de Date: setMonth(nummes) 

Esta funcion se usa para modificar el mes del objeto fecha al que se aplica. El nuevo 
valor se pasa como un numero en el argumento. El valor debera ser como es logico 
numerico o convertible a numerico y comprendido entre 0 (Enero) y 11 (Diciembre). Si 
el valor esta fuera del rango se toma el exceso sobre 11 y se corrige adecuadamente la 
fecha, y si es negativo se toma como numero de meses antes de Enero (-1 serfa 
Diciembre, -2 serfa Noviembre, etc.). El ejemplo es muy sencillo, en este caso se 
cambia el mes de Septiembre por Marzo 

var fecha = new Date ("10 Sep 2000 00:00:00"); 
fecha.setMonth(2); 

document.write("Minact 20: "tfecha.toString()); 

u) Metodos de Date: setSeconds(miliseg) 

Nos permite modificar el numero de segundos de la hora almacenada en el objeto fecha 
al que se aplica, poniendo los segundos al valor pasado como argumento. 

Habitualmente el argumento estara comprendido entre 0 y 60. 

var fecha = new Date("10 Sep 2000 00:00:00"); 

var nl="<br>"; 

fecha.setSeconds(90); 

document.write(fecha.toString()tnl); 

v) Metodos de Date: setTime() 

Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970 
hasta la hora almacenada en el objeto fecha al que se aplica. En el ejemplo que sigue 
creamos un objeto Date con la fecha actual, a continuacion escribimos el numero de 
milisegundos dado por este funcion, veras que este numero habitualmente es muy 
grande, realmente esta funcion puede ser util para calcular el tiempo transcurrido entre 
dos instantes, por ejemplo en un puzzle podrfa ser util para calcular el tiempo que el 
jugador emplea en resolver el puzzle, restando el setTime() obtenido al final del juego 
del setTime() obtenido al inicio. 

var ahora = new Date(); 
document.write(ahora.setTime()); 


x) Metodos de Date: setYear() 

Nos permite cambiar el ano del objeto fecha por el valor pasado como argumento, un 
numero interpretado como ano completo, o sea, que para poner el ano 1995 se debe 
pasar 1995, no el 95. El ejemplo pone precisamente este valor en el campo ano de la 
variable fecha. 
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var fecha = new Date(); 
fecha.setFullYear(1995) 
document.write(fecha.toString ()); 

Como el ano es de cuatro dfgitos no hay problema de efecto 2000. 

y) Metodos de Date: toLocaleStringO 

Esta funcion se usa para transformar el objeto fecha al que se aplica a una cadena de 
caracteres segun el estandard UTC (Universal Time Coordinates), denominacion actual 
del GMT (Greenwich Meridian Time). La hora se ajusta segun la configuracion del 
ordenador. En el ejemplo que sigue la cadena devuelta sera "Mon, 10 Apr 2000 
02:00:00 UTC" (Netscape cambia UTC por GMT) 
var fecha = new Date ("10 Apr 2000 02:00:00"); 
document.write(fecha.toUTCString()); 

Como ves existe una diferencia en la hora almacenada y la devuelta por la funcion, esto 
es debido a que la cadena devuelta es la hora correspondiente a Greenwich, no la local 
del ordenador. 

Existe una funcion similar, la toGMTStringO, que es considerada como obsoleta y que 
se mantiene por cuestiones de compatibilidad. 

z) Metodos de Date: toUTCString(fecha) 

Nos devuelve la cantidad de milisegundos transcurridos desde el 1 de Enero de 1970 
00:00:00 hasta la hora pasada en el argumento fecha. Este argumento se pasa como una 
serie de numeros separados por comas en el orden: Ano, mes, dfa, y opcionalmente: 
hora, minuto, segundos. Este metodo es un metodo global del objeto y por tanto no es 
necesario crear un objeto Date para usarlo, como vemos en este ejemplo que toma como 
fecha actual el 1 de Noviembre de 2000 a las 00:00:00. 
var transc= Date.UTC(2000, 10, 1) ; 
document.write(transc) ; 

I) Objeto Math 

Es el objeto que usa JavaScript para dotar al lenguaje de funciones matematicas 
avanzadas y de constantes predefinidas, como el numero PI. 

Metodos 


abs: Valor absoluto 

cos: coseno 

pow: Potencia de 

acos: Arco coseno 

exp: Exponencial 

random: Numero al azar 

asin: Arco seno 

floor: Redondeo inferior 

round: Redondear 

atan: Arco tangente 

log: Logaritmo natural 

sin: Seno 

a tan 2: Arco tangente 

max: maximo 

sqrt: Rafz cuadrada 

ceil: Redondeo superior 

min: Minimo 

Tan: Tangente 


Propiedades 

Son las habituales constantes como el numero e, PI y algunos otros valores habituales 
en calculos matematicos. 
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E 

Constante de Euler 
la base para los 
logaritmos naturales 

LN10 

Logaritmo natural 
de 10 

LOG10E 

Logaritmo en base 

10 deE 

SQRT1_2 

Rafz cuadrada de 0.5 
o sea la inversa dela 
rafz de 2 

LN2 

Logaritmo natural 
de 2 

LOG2E 

Logaritmo en base 2 
deE 

PI 

El conocido numero 
Pi 

SQRT2 

Rafz cuadrada de 2 


a) Metodos Math: abs(expmum) 

Devuelve el valor absoluto, o sea, sin signo, del argumento. Si el argumento fuera no 
entero sera convertido a numerico siguiendo las reglas de la funcion parselnt() o 
parseFloat(). Su sintaxis es tan simple como el ejemplo: 

var numabs = Math.abs( - 45) 

la variable numabs contendra el valor 45. 

b) Metodos Math: acos(exprnum) 

Es una funcion trigonometrica que sirve para calcular el angulo cuyo coseno es el valor 
dado por el argumento, el arccos(). Este argumento debera ser una expresion numerica o 
transformable en numerica, comprendida entre -1 y +1 y el angulo devuelto viene dado 
en radianes. 

var arco = Math, acos( 1) 

la variable arco contendra el valor 0. 

Recuerda las matematicas del cole. El radian es una unidad de medida de arcos tal que 
2*pi radianes equivalen a 360°. 

c) Metodos Math: asin(exprnum) 

Es una funcion trigonometrica que sirve para calcular el angulo cuyo seno es el valor 
dado por el argumento, es decir, el llamado arcosen. Este argumento debera ser una 
expresion numerica, o transformable en numerica, comprendida entre -1 y +1 y el 
angulo devuelto viene dado en radianes. 

var arco = Math.asin( 1 ) 

la variable arco contendra el arco cuyo seno es 1, o sea, 1.57 o lo que es lo mismo pi / 2 
radianes. 

Recuerda las matematicas del cole. El radian es una unidad de medida de arcos tal que 
2*pi radianes equivalen a 360°. 

d) Metodos Math: atan(expmum) 

Es una funcion trigonometrica que sirve para calcular el angulo cuya tangente es el 
valor dado por el argumento, o sea el arctg(). Este argumento debera ser una expresion 
numerica o transformable en numerica, sin lfmites, y el angulo devuelto viene dado en 
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radianes. 

var arco = Math.atan( 1 ) 

la variable arco contendra el arco cuya tangente es 1, o sea, 0.7853981633974483 o lo 
que es lo mismo pi / 4 radianes (45°). 

Recuerda las matematicas del cole. El radian es una unidad de medida de arcos tal que 
2*pi radianes equivalen a 360°. 

e) Metodos Math: atan2(coorX, coorY) 

Es una funcion trigonometrica que sirve para calcular el angulo cuya tangente es el 
cociente de sus argumentos, en otras palabras devuelve el angulo desde el origen de 
coordenadas hasta un punto cuyas coordenadas son los argumentos de la funcion. Los 
argumentos deberan ser numericos o transformables en numericos, y el angulo devuelto 
viene dado en radianes. 

var argum= Math.atan2( 10, 4) 

la variable argum contendra el arco cuya tangente es 10/4. 

Recuerda las matematicas del cole. El radian es una unidad de medida de arcos tal que 
2*pi radianes equivalen a 360° . Es una funcion util para trabajar con numeros 
complejos pues realmente calcula el argumento de un complejo donde coorY es la parte 
real y coorX es la imaginaria. 

f) Metodos Math: ceil(expmum) 

Devuelve el valor del argumento redondeado por exceso, es decir el menor numero 
entero mayor o igual al argumento. Si el argumento fuera no numerico sera convertido a 
numerico siguiendo las reglas de la funcion parselnt() o parseFloat(). Su sintaxis es 
tan simple como el ejemplo: 

var redexceso = Math.ceil( 4.25) 

la variable redexceso contendra el valor 5. 

g) Metodos Math: cos(exprnum) 

Es una funcion trigonometrica que sirve para calcular el coseno del angulo pasado como 
argumento en radianes. Este argumento debera ser una expresion numerica o 
transformable en numerica. 

var coseno = Math.cos( Math.PI/2) 

la variable coseno contendra el valor 0, que es el coseno de pi/2 radianes (90°). 

h) Metodos Math: exp(expmum) 

Devuelve el valor del numero e (constante de Euler, aproximadamente 2,178) elevada al 
exponente dado por el argumento. Si el argumento fuera no entero sera convertido a 
numerico siguiendo las reglas de las funciones parselnt() o parseFloat(). Su sintaxis es 
tan simple como el ejemplo: 

var e4 = Math.exp(4) 
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la variable e4 contendra el valor e 4 . El numero e es la base de los logaritmos neperianos 
por lo que esta funcion sirve para calcular antilogaritmos. 

i) Metodos Math: floor(exprnum) 

Devuelve el valor del argumento redondeado por defecto, es decir, el mayor numero 
entero menor o igual al argumento. Si el argumento fuera no numerico sera convertido a 
numerico siguiendo las reglas de la funcion parselnt() o parseFloat(). Su sintaxis es 
tan simple como el ejemplo: 

var redexceso = Math.floor( 4.75) 

la variable redexceso contendra el valor 4. 

j) Metodos Math: log(expmum) 

Devuelve el logaritmo natural o neperiano, o sea, en base al numero e, del argumento. 

Si el argumento fuera no numerico sera convertido a numerico siguiendo las reglas de la 
funcion parselnt() o parseFloat(). Si el argumento fuera un valor negativo esta funcion 
devuelve NaN. Su sintaxis es tan simple como el ejemplo: 

var logaritmo = Math.log( 1000) 

la variable logaritmo contendra el valor 6.907755278982137 . 

k) Metodos Math: max(numl, num2) 

Devuelve el mayor de los dos numeros o expresiones numericas pasadas como 
argumentos. Si alguno de los argumentos fuera no numerico sera convertido a numerico 
siguiendo las reglas de la funcion parselnt() o parseFloat(). Su sintaxis es tan simple 
como el ejemplo: 

var mayor = Math.wax( 12, 5) 

la variable mayor contendra el valor 12. 

l) Metodos Math: min(numl, num2) 

Devuelve el menor de los dos numeros o expresiones numericas pasadas como 
argumentos. Si alguno de los argumentos fuera no numerico sera convertido a 
numericos siguiendo las reglas de la funcion parselnt() o parseFloat(). Su sintaxis es 
tan simple como el ejemplo: 

var menor = Math.min( 12, 5) 

la variable menor contendra el valor 5. 

m) Metodos Math: pow(base, exp) 

Calcula la potencia de un numero, dado por el argumento base, elevado al exponente 
dado por el argumento exp. Si alguno de los argumentos fuera no numerico sera 
convertido a numerico siguiendo las reglas de la funcion parselnt() o parseFloat(). Su 
sintaxis es tan simple como el ejemplo: 

var potencia = Math.pow( 2, 4) 
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la variable potencia contendra el valor 16. 

n) Metodos Math: random() 

Calcula un numero aleatorio, realmente seudo-aleatorio, comprendido entre 0 y 1 ambos 
inclusive. Cada vez que se carga el interprete de JavaScript se genera una semilla base 
para el calculo. No lleva argumentos y su sintaxis es tan simple como el ejemplo: 

var azar = Math.random()*10 

la variable azar contendra un numero al azar entre 0 y 10. 

o) Metodos Math: round(exprnum) 

Devuelve el valor entero mas proximo al numero pasado como argumento, es decir, 
redondea. Si la parte decimal del argumento es 0.5 o mayor devuelve el primer entero 
por encima del argumento (redondeo por exceso) en caso contrario devuelve el entero 
anterior al argumento (redondeo por defecto). Si el argumento fuera no entero sera 
convertido a numerico siguiendo las reglas de la funcion parselnt() o parseFloat(). Su 
sintaxis es tan simple como el ejemplo: 

var enterol = Math.random(4.25) 
var entero2 = Math.random(4.65) 

la variable enterol contendra el valor 4 mientras enterol que contendra 5. 

p) Metodos Math: sin(expmum) 

Es una funcion trigonometrica que sirve para calcular el seno del angulo pasado como 
argumento en radianes. Este argumento debera ser una expresion numerica o 
transformable en numerica. 

var seno = Math.sin( Math.PI/2) 

la variable seno contendra el valor 1, que es el seno de pi/2 radianes (90°). 

q) Metodos Math: sqrt(exprnum) 

Devuelve la raiz cuadrada del valor pasado como argumento. Si el argumento fuera no 
entero sera convertido a numerico siguiendo las reglas de la funcion parselnt() o 
parseFloat(). Si el argumento fuera negativo o cualquier otro valor no numerico 
devolvera NaN. Su sintaxis es tan simple como el ejemplo: 

var raiz = Math.sqrt( 49) 

la variable raiz contendra el valor 7. 

r) Metodos Math: tan(expmum) 

Es una funcion trigonometrica que sirve para calcular la tangente del angulo pasado 
como argumento en radianes. Este argumento debera ser una expresion numerica o 
transformable en numerica. 

var tangente = Math.tan( Math.PI/4) 

la variable tangente contendra el valor 1, que es la tangente de pi/4 radianes (45°). 


52 


6) Ejemplos JavaScript: 


Estos ejemplos te permitiran poner en practica los conceptos aprendidos con el tutor. Te 
bastara con un editor HTML para probar por ti mismo estos programas de muestra. Solo 
se usan dos metodos del navegador: document.write y ventanas alert para mostrar 
resultados. Recuerda que el codigo lo debes situar en la seccion HEAD de la pagina y 
las llamadas a las funciones en el cuerpo. Por ahora no se usan eventos, eso queda para 
la 2 a Fase: el HTML dinamico. 

Ejemplos 


Operadores 

Comprobar E-mail 2 

Media Aritmetica 

Buscar en un Array 

Saludo 

Extraer Subcadena 

Array aleatorio 

Creando Objetos 

Comprobar E-mail 1 



A) Operadores 

Enunciado 


Se trata de crear una sencilla funcion para sumar dos numeros, que se le pasan como 
argumentos. La funcion devolvera la suma de ambos numeros. 

El codigo 

Seccion Head 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

function sumar(suml, sum2) 

{ 

var resultado; 
resultado = suml + sum2; 
return resultado; 

} 


</SCRIPT> 

Seccion Body 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

document.write("4 + 10 = "+ sumar(4, 10) ); /*Mostrar resultado*/ 

</SCRIPT> 

Comentarios 


En este sencillo ejemplo creamos la funcion mediante la palabra clave function a la que 
sigue el nombre en este caso sumar. Entre parentesis escribimos los nombres que 
damos a los argumentos que usa la funcion: suml y sum2 en el ejemplo. Cuando 
llamemos a la funcion entre parentesis escribiremos dos valores que se guardaran en 
estas variables. Tambien vemos como crear una variable usando la palabra clave var 
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seguida del nombre de la variable, en el ejemplo resultado. El sfmbolo = es el operador 
asignacion con el que guardamos la suma en la variable resultado. Por ultimo usamos 
return para devolver el resultado al programa que usa la funcion sumar. Los sfmbolos 
/* y */ encierran cualquier comentario personal para clarificar el programa. 

En el cuerpo de la pagina usaremos document,write para mostrar en una ventana 
emergente el resultado de la suma. Una ultima observation que sera comun para todos 
los ejemplos: observa como todo lo que sea codigo JavaScript se encierra entre las 
etiquetas <Script....> y </script>, esto le indica al navegador que debe ejecutar 
instrucciones de programa. Igualmente veras los sfmbolos <! — y —> como sabes es la 
manera que usa HTML para senalar los comentarios, y en este caso se usa para que los 
navegadores que no soportan JavaScript se salten el codigo. 

B) Media Aritmetica 

Enunciado 


Crear una funcion que calcule la media aritmetica (suma de datos dividido por numero 
de valores) de un conjunto de datos numericos que se le pasan como argumentos. El 
numero de datos es variable. 

El codigo 

Seccion Head 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

function media() 

{ 

var total=0, res, numDatos, item; 

numDatos = arguments.length; 

for (item = 0; item < numDatos; item++) 

{ 

total += arguments[item]; 

} 

res = total/numDatos; 
return res; 


</SCRIPT> 

Seccion Body 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 
document.write ( media( 3,50,40,25, 10) ); 

</SCRIPT> 

Comentarios 


Se crea la funcion como es habitual con function. Se declaran las variables que se van a 
usar, en esta ocasion al mismo tiempo inicializamos el valor de una de ellas, total, que 
va a almacenar la suma de los datos. 

Guardamos en numDatos el numero de argumentos pasados mediante la propiedad 
length de la propiedad arguments del objeto Function. 

Mediante un bucle for recorremos la matriz argumentos y vamos acumulando en total 
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los datos pasados a la funcion. Observa el uso del operador += que suma al contenido 
de la variable total el valor del elemento arguments [item]. 

Calcula la media dividiendo total por el numDatos y por ultimo devuelve el resultado 
almacenado en res. 

Este codigo podria ser mas corto pero he preferido detallarlo lo mas posible para ilustrar 
el uso de operadores y hacer el programa mas claro. 

C) Saludo 

Enunciado 


Este programa hara que tu ordenador te salude educadamente dandote los buenos dias, 
buenas tardes o buenas noches dependiendo de la hora que sea. 

El codigo 

Seccion Head 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

function saludar(){ 
var tiempo = new Date(); 
var hora, cad="son las 
with (tiempo){ 
hora = getHours(); 

cad += hora + + getMinutes()+":"+getSeconds(); 

} 

if (hora < 12) 

cad = "Buenos dias, "+ cad; 
else if (hora < 18) 

cad = "Buenas tardes, "+ cad; 

else 

cad = "Buenas noches, " + cad; 

return cad 
} 

// —> 

</SCRIPT> 

Seccion Body 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

document.write(saludar() ) ; 

— > 

</SCRIPT> 

Comentarios 


En este ejemplo usamos el objeto Date para determinar la hora del dia, a continuacion 
extraemos la hora del objeto tiempo y construimos una cadena cad con la hora, minuto 
y segundo del dia para el saludo. La variable hora la comparamos con las 12 y las 18 
mediante sentencias if...else anidadas. Si es antes de las 12 (hora < 12) el saludo a 
escribir sera la cadena "Buenos dias, son las..." seguido de la hora completa que esta 
almacenada en la variable cad, si no es antes de las 12 comprobamos si es antes de las 
18 si es asi la cadena es "Buenas tardes son las..." y si no se da ninguno de los casos 
anteriores debe ser por la noche. Observa el uso de la estructura with que permite 
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trabajar con los elementos de un objeto sin tener escribir su nombre y el punto separador 
(tiempo.getDate() etc). Observa tambien como modificamos la variable cad 
anteponiendole al valor que guarda (la hora completa) el prefijo con el saludo adecuado. 

D) Array aleatorio 

Enunciado 


Este sencillo ejemplo trata de como rellenar una lista de longitud dada, en este caso 10, 
con numeros aleatorios comprendidos entre 0 y 20, todos enteros. 

El codigo 

Section Head 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

function rellenar(matriz) 

{ 

var largo, valor, ind; 
largo = matriz.length; 
for(ind = 0; ind < largo; ind++) 

{ 

valor = Math.random()*20; 
matriz[ind] = Math.round(valor) ; 

} 

} 

// —> 

</SCRIPT> 

Section Body 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

var lista=new Array(10); 
rellenar(lista); 
document.write(lista); 

// —> 

</SCRIPT> 

Comentarios 


En este programa es interesante observar como los valores dados al argumento dentro 
de la funcion permanecen al finalizar esta, de forma que la variable lista antes de pasar 
por la funcion estaba vatia y despues de ejecutarse rellenar posee valores numericos 
aleatorios. Esto ocurre asf porque ese argumento es un objeto Array, es el unico caso en 
que JavaScript usa paso de argumentos por referencia. Otro punto es que esta funcion 
no usa return ya que no devuelve ningun valor. El resto del codigo es muy simple: un 
bucle for() para recorrer la matriz e irle dando valores calculados con el metodo 
random del objeto Math redondeados al entero mas proximo mediante el metodo 
round. 
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E) Comprobar E-mail 1 


Enunciado 


Esta es una funcion que puede resultar bastante util para comprobar direcciones de 
correo. Se trata de ver si una direccion de email contiene el caracter @ y el punto en su 
lugar. 

El codigo 

Seccion Head 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

function checkemail(email) 

{ 

var indl, ind2, ind3; 
indl = email.indexOf@; 
ind2 = email.indexOf ('.'); 
ind3 = email.lastlndexOf@; 

if ((indl<=0) || (ind2<indl) I| (ind3 != indl)) 

return "No es correcto"; 

else 

return "Correcto"; 

} 

// —> 

</SCRIPT> 

Seccion Body 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

var dire = "javascript@ciudadfutura.com"; 
document .write(diret" "tcheckemail(dire)); 
dire= "jrasr@rest.est@es"; 

document.write(diret" "tcheckemail(dire)); 

— > 

</SCRIPT> 

Comentarios 


Sin comentarios que destacar. 
F) Comprobar E-mail 2 
Enunciado 


Esta es una funcion que puede resultar bastante util para comprobar direcciones de 
correo. Se trata de ver si una direccion de email contiene caracteres correctos y sigue el 
esquema habitual: usuario@servidor, usuario y servidor podran contener caracteres 
alfanumericos mas _ (guion bajo) y - (guion normal). 
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El codigo 


Section Head 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

function checkMail(cadena) { 
var plant = /[ A \w A @ A \. A -]+/gi 
if (plant.test(cadena)) 

alert(cadena + " contiene caracteres extranos.") 

else{ 

plant =/( A \w+) (@{1}) ([\w\.-]+$)/i 
if (plant.test(cadena)) 

alert(cadena + " es correcta.'j 

else 

alert(cadena + " no es valida.") 

} 

} 

// —> 

</SCRIPT> 

Seccion Body 

<form name="forml" method="post" action=""> 

Introduce tu e-mail 

<input type="text" name="email"> 

<input type="button" name="Button" value="Comprobar" 
onclick="checkMail(this.form.email.value)"> 

</form> 

Comentarios 


La funcion checkMail() comprueba primero si existe algun caracter extrano para lo cual 
usa la expresion regular: /[ A \w A @ A \. A -]+/gi, comprueba si existe algun caracter no 
alfanumerico, o diferente de @, del punto o del guion. Una vez ha hecho esto pasa a 
comprobar la estructura de la cadena mediante otra expresion regular, en este caso 
comprueba que la cadena comienza con un caracter alfanumerico ( A indica aquf inicio 
de cadena y \w caracteres alfanumericos) seguido de otros similares, este grupo debe ir 
seguido por un solo simbolo arroba (@{ 1}) tras el cual puede existir cualquier grupo de 
alfanumericos incluido el punto o el guion ([\w\.-]) hasta llegar al final de la cadena ($). 
Si tienes dudas consulta el apartado descriptivo de las expresiones regulares y el 
dedicado a sus metodos. 

G) Buscar en un Array 

Enunciado 


En esta ocasion tenemos una lista de nombres y deseamos determinar si un nombre en 
concreto esta en la lista, y si es asf en que posicion se encuentra. Si el nombre no esta en 
la lista la funcion debe devolver un valor negativo. 

El codigo 

Seccion Head 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 
function buscarltem(lista, valor){ 
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var ind, pos; 

for(ind=0; ind<lista.length; ind++) 

{ 

if (lista[ind] == valor) 
break; 

} 

pos = (ind < lista.length)? ind : -1; 
return (pos); 

} 

// —> 

</SCRIPT> 

Section Body 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

var listal = new Array('Juan', 'Pedro', 'Luis', 'Maria', 'Julia'); 
var cad = 'Maria'; 

var pos = buscarltem(listal, cad) ; 
if (pos >=0) 

document.write(cad+' esta en la posicion '+ pos ); 
else 

document.write(cad+ ' no esta.'); 

// —> 

</SCRIPT> 

Comentarios 


La lista se construye como un Array en el que almacenamos nombres. La variable cad 
contiene el nombre que deseemos buscar. La funcion funciona con dos argumentos: la 
lista de nombres y el valor a buscar, en ella hacemos un bucle para recorrer la variable 
lista hasta encontrar el nombre buscado, si lo encontramos detenemos el bucle con la 
instruccion break. Si el bucle ha terminado sin encontrar el nombre la variable ind sera 
igual a la longiutd del Array (recuerda que los indices van desde 0 a la longitud del 
array menos 1), mientras que si se ha encontrado el nombre su valor sera menor que esa 
longitud.. Observa la sentencia despues del bucle: en pos ponemos el valor del ind si se 
ha encontrado el nombre y si no ponemos -1, es la forma abreviada de usar una 
sentencia if...else. 

H) Extraer subcadena 

Enunciado 


Partimos de un texto y veremos como leer una parte del mismo. La parte a leer va a 
estar delimitada por dos etiquetas una de principio y otra de fin. La etiqueta de inicio 
sera /* y la de fin sera */. 

El codigo 

Seccion Head 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

function extraer(texto, etqini, etqfin) 

{ 

var indO, indl, parte =""; 
indO = texto.indexOf(etqini); 
if (indO >=0) 
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{ 

indl = texto.indexOf(etqfin); 
if (indl>indO) 

parte = texto.substring(indO+etqini.length, indl); 

} 

return parte; 

} 

// —> 

</SCRIPT> 

Section Body 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

var cadena = "Esta cadena es la que, /*en el ejemplo*/, se va a 
procesar"; 

document.write(cad) ; 

document.write('<br>Cadena extraida:<br>'); 
document.write(extraer(cadena, '/*' ,'*/')); 

// —> 

</SCRIPT> 

Comentarios 


En este ejemplo vemos como extraer de un texto una parte delimitada por etiquetas. En 
primer lugar buscamos la position de la etiqueta de inicio, etqini, que guardamos en 
indO; si existe esta etiqueta (indO >= 0) buscamos la etiqueta de final, etqfin, que debe 
estar despues de la de inicio, por eso comparamos (indl> indO). Por ultimo extraemos 
los caracteres comprendidos entre el final de la etqini (ind0+ longitud de etqini) y el 
inicio de la etqfin usando el metodo substring. 

I) Creando Objetos 

Enunciado 


Vamos a crear un objeto usado para representar un artfculo de una tienda. El artfculo se 
va a caracterizar por una description, un codigo y un precio, y debe permitir el calculo 
de su correspondiente IVA. 

El codigo 

Seccion Head 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

function iva() 

{ 

return Math.round(this.valor*0.16) ; 

} 

function total(reb) 

{ 

var precio = this.iva()+ this.valor; 
precio = precio - precio*reb/100; 
return Math.round(precio); 

} 

function obj_articulo(desc, cod, precio) 

{ 

this.desc = desc; 
this.codigo = cod; 
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this.valor = precio; 
this.iva = iva; 
this.pvp = total; 

} 

// —> 

</SCRIPT> 

Section Body 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

var item = new obj_articulo("Raton PS2", "PerRt-01", 500); 

document.write('Articulo: ' + item.desc + " ("+item.codigo+")"+ " 

<br>"); 

document.write("Precio: " +item.valor + " Ptas<br>"); 
document.write("IVA: " + item.iva() + " Ptas<br>"); 

document.write("Precio venta: "+ item.pvp(10)+ " Ptas (Dto 10%)<br>"); 
// —> 

</SCRIPT> 

Comentarios 


Este ejemplo ilustra como crear un Objeto con sus propiedades y metodos. La funcion 
obj_articulo es el constructor del objeto mientras que las funciones iva() y total(reb) 
son metodos para ese objeto. El argumento de la segunda indica un posible descuento. 
Estas funciones son simples operaciones aritmeticas y no requieren mas explication. En 
cuanto al constructor las propiedades (desc, codigo, valor) se asignan directamente 
usando this para referirnos al propio objeto. Para los metodos se hace exactamente igual 
pero asignandole funciones (iva, total). Tenemos un metodo que usa argumentos y otro 
sin ellos, es detir este ejemplo presenta todas las posibilidades en creacion de objetos y 
podria ser la base para crear una lista de la compra una de cuyas propiedades serfan un 
objeto del tipo aquf definido. 
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7) Aplicaciones JavaScript HTML: 


Aquf tienes algunos scripts utiles para aplicarlos directamente a tus paginas web. Son 
ejemplos de HTML dinamico donde se manejan los objetos que el explorador expone al 
JavaScript. El codigo de cada script esta en la propia pagina, en la section HEAD. Si 
quieres usarlo solo debes seleccionarlo con el raton y copiarlo con CTRL+C o con el 
menu del boton derecho, y luego lo pegas en la pagina donde quieras usarlo. 

Ejemplos 


A) Reloj en Pantalla 

K) Password 1 

B) Fecha de Actualizacion 

L) Tftulo de pagina animado 

C) Menus Desplegables (IE) 

M) Bloque fijo 

D) Formularios de Correo 

N) Paisaje Nevado 1 

E) Personalizar Colores 

O) Paisaje Nevado 2 

F) Persianas 

P) Estrella Navidena 1 

G) Rollover 

Q) Estrella Navidena 2 

H) Informacion del Navegador 

R) Buscador en la Pagina 

I) Esquema desplegable (IE) 

S) Pagina de Inicio 

J) Boton mas/menos 

T) Carrusel de Imagenes 


A) Reloj en Pantalla 
a) Codigo JavaScript 

Primero comprobamos el navegador: si es Netscape o Microsoft 

var mie =(navigator.appName.indexOf("Microsoft")>=0) 
function actReloj() 

I 

var hhmmss=new Date() 
var horas=hhmmss.getHours() 
var minutos=hhmmss.getMinutes() 
var segundos=hhmmss.getSeconds() 

Convertimos los numeros a dos dfgitos, o sea, 6 -> 06 

horas = (horas<=9)?("0"+horas):horas; 
minutos = (minutos<=9)?("0"+minutos):minutos; 
segundos=(segundos<=9)? ("0"+segundos)rsegundos; 

Aquf construimos la cadena de texto HTML con la hora, y el tipo de letra que se escribe 
en la capa del reloj. 

reloj="<font size='5' face='Arial' ><b>"+horas+":"+minutos+":" 
fsegundos +"</bx/font>" 
if (mie) 

t 

reloj.innerHTML=reloj; 

} 

else 

{ 

document.layers.reloj.document.write(reloj); 
document.layers.reloj.document.close(); 

} 

//ejecuta la funcion cada segundo (1000 miliseg) 
setTimeout("actReloj()", 1000) ; 

} 
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b) Codigo HTML 

<HTML> 

<HEAD> 

<SCRIPT language="JavaScript"> 

<!-Aqui situas el codigo javascript -> 

</script> 

</HEAD> 

<!— El reloj se lanza tras cargarse la pagina —> 

<BODY onload="actReloj()"> 

<!— La etiqueta Div que sigue define la capa que contendra el reloj y 
su posicion vertical (top) y horizontal (left) —> 

<div id="reloj" 

style="position:absolute; top: 100; left: 100"></div> 

</BODY> 

</HTML> 

B) Fecha de Actualizacion 

a) Codigo JavaScript 

Primero leemos en cfecha una cadena con la fecha correspondiente a la ultima vez que 
se modified el documento. Convertimos cfecha en un objeto tipo Date que llamamos 
fecha. De este objeto extraemos el dia de mes, el numero de mes y el ano. Para que el 
mes saiga con su nombre simplemente usamos un array con los nombres de los meses 
ordenados, de manera que el numero de mes extraido del objeto fecha nos sirve como 
indice en el array meses para averiguar el nombre del mes. 

function ultActual() 

t 

var cfecha = document.lastModified; 

var meses = new Array("Enero", "Febrero","Marzo","Abril", 

"Mayo","Junio", "Julio", "Agosto", "Septiembre", "Octubre", 
"Noviembre", "Diciembre"); 

var fecha = new Date(Date.parse(cfecha)); 

var dia = fecha.getDate (); 

var mes = meses [ fecha.getMonth()]; 

var agno = fecha.getYear(); 

return (dia +" de "+mes +" de "tagno); 

} 

b) Codigo HTML 

La llamada a la funcion ultActual() se coloca en la parte de la pagina que queramos, y 
por supuesto podemos ponerle los atributos o el estilo que deseemos. 

<HTML> 

<HEAD> 

<SCRIPT language="JavaScript"> 

<!-Aqui situas el codigo javascript -> 

</script> 

</HEAD> 

<BODY> 

La pagina actual se actualizo el 
<script language="JavaScript"> 

document.write("Esta pagina se actualizo el "tultActual()); 

</script> 

</BODY> 

</HTML> 
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C) Menus Desplegables (IE) 
a) Codigo JavaScript 


La primera funcion, despMenu(), sirve para mostrar u ocultar la capa que contiene los 
items del menu, el primer argumento es el ID de la capa y el segundo es 0 para ocultar y 
1 para mostrar. La segunda funcion, destacar(),se usa para resaltar modificar el color de 
fondo del elemento del menu cando pase el raton, el primer argumento es el ID de la 
capa que contiene al elemento del menu y el segundo se interpreta como sigue: 

0: indica que se debe resaltar, el raton esta encima. 

1: se vuelve a la normalidad. El color original se guarda en la variable global itemOrig. 

<script language="JavaScript"> 

Primero comprobamos el navegador: si es Netscape o Microsoft 

var mie =(navigator.appName.indexOf("Microsoft")>=0) 
var itemOrig; 

function despMenu(nombre,sn) 

I 

obj = document.all[nombre]; 
if (sn>0) 

obj.style.visibility = "visible"; 
else 

obj.style.visibility = "hidden"; 

} 

function destacar(obj, val) 

{ 

if (val=l) 

{ 

itemOrig = obj.style.backgroundColor; 
obj.style.backgroundColor="Aqua"; 

} 

else 

obj.style.backgroundColor= itemOrig; 

} 


</script> 

b) Codigo HTML 

Puedes personalizar este ejemplo modificando los estilos de cabecera, items y capa del 
menu, o el atributo a cambiar en los elementos del menu, etc. A tu gusto. 

<HTML> 

<HEAD> 

<!— Definimos estilos para el menu —> 

<style type="text/css"> 

.itMenu { position: absolute; clip: rect( ); background: #99FF99; 
visibility: hidden} 

.cabMenu { position: absolute; clip: rect( ); color: #FFFF66; 
background: #0033FF} 

.itMenuAct { background: #CCFFFF; width: 160px } 

.itMenuDes { background: #99FF99; width: 160px } 

—> 

</style> 

<SCRIPT language="JavaScript"> 

<!-Aqui situas el codigo javascript -> 
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:/script: 

:/HEAD> 


<BODY> 

<!— La etiqueta DIV que sigue define la capa con la cabecera del 
menu. Cuando el raton pase por aqui se despliega el menu—> 

<div id="Menul" style="width:140px; height:21px; z-index:2; 
left: 39px; top: 23px" class="cabMenu" 
onMouseOver="despMenu('itMenul', 1)" 

onMouseout="despMenu('itMenul',0)">Cabecera del menu 
</div> 


<!— La etiqueta DIV que sigue define la capa que contendra el menu, 
la que se despliega cuando el raton pase por la cabecera—> 


<div id="itMenul" style="width:103px; height:75px; z-index:l; left: 
39px; top: 44px" class="itMenu" 

onMouseOver="despMenu(this.id,1)" onMouseout="despMenu(this.id,0)"> 
<div id="itMenull" class="itMenuDes" onMouseover="destacar(this, 1)" 
onMouseout="destacar(this,0)" > 

<a href="destinol.htm" >Item l</a> 

</div> 

<div id="itMenul2" class="itMenuDes" onMouseover="destacar(this,1)" 
onMouseout="destacar(this,0)" > 

<a href="destinol.htm" >Item 2</a> 

</div> 

<div id="itMenul3" class="itMenuDes" onMouseover="destacar(this,1)" 
onMouseout="destacar(this,0)" > 

<a href="destinol.htm" >Item 3</a> 

</div> 

<div id="itMenul4" class="itMenuDes" onMouseover="destacar(this,1)" 
onMouseout="destacar(this,0)" > 

<a href="destinol.htm" >Item 4</a> 

</div> 

</div> 

Resto de la pagina web 
</BODY> 

</HTML> 


D) Formulario de Correo 


a) Codigo JavaScript 


Aquf tienes una aplicacion para crear tus propios formularios con envio de los datos por 
correo. El codigo Javascript es de lo mas simple. Esta es una muestra que deberas 
personalizar para tus propias necesidades. Como siempre puedes usarlo libremente, a 
cambio te agradecerfa que colocaras un link a este sitio. 

Esta funcion se usa para validar el formulario, aunque tambien podrfa hacer otras cosas. 
Es llamada por el evento onsubmit del formulario, como puedes ver en el codigo 
HTML. 

En este caso concreto si en el formulario no se ha seleccionado al menos una de las 
opciones la funcion devuelve falso y el formulario no se envfa, en caso contrario todo 
sigue su curso y el formulario se envia. La funcion recibe como argumento el objeto 
formulario y los valores de sus campos se identifican de la siguiente forma: 
obj.name_en_el_campo.value, salvo en el caso de los checkbox y radiobutton que se 
identifican como elementos de un array seguidos de la propiedad checked que es true 
si esta marcado o false si no lo esta. En el cuerpo de los mensajes enviados con este 
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formulario recibiras en tu correo los valores de cada campo como pares 
campo=valor_del_campo. Pruebalo y veras que simple resulta. 

function Comprobar(obj) 

{ 

if (!obj.Opciones [0] .checked && 

!obj.Opciones[1].checked && 

!obj.Opciones[2].checked) 

{ 

alert("Debe elegir una opcion") 
return false; 


else 

return true 

} 

b) Codigo HTML 

Aquf tienes el codigo HTML para poner en la seccion <body> de la pagina donde 
coloques el formulario. Ya sabes: seleccionar, copiar y pegar. Personalizalo a tu gusto. 
Contiene campos de texto, checkbox, radiobutton y menus desplegables. En el campo 
action colocas la direccion e-mail donde quieras recibir el formulario, el campo 
?subject=asunto es opcional, pero muy util a la hora de filtrar la respuesta y enviarla a 
una carpeta determinada con tu programa de correo. La clave de esta aplicacion esta en 
el evento onsubmit, si la funcion colocada en ese evento devuelve true el formulario se 
envia y si devuelve false no se envia. Asi de facil. 

<form name="forml" method="POST" onsubmit="return Comprobar(this)" 
action= "mailto:poneaqui@tuemail?subject=asunto" enctype ="text/plain" 
> 

<p>Campo de texto 

<input type="text" name="textfield" size="80"> 

<br> 

Lista de seleccion 
<select name="select"> 

Coption value="Valor 1" selected>Elemento l</option> 

Coption value="Valor 2">Elemento 2</option> 

<option value="Valor 3">Elemento 3</option> 

</select> 

<br> 

Campos excluyentes 

<input type="radio" name="radio" value="Boton 1"> 

<input type="radio" name="radio" value="Boton 2"> 

<br> 

Campos para opciones: <br> 

Opci6n 1 

<input type="checkbox" name="Opciones" value="opcion l"xbr> 

Opcion 2 

<input type="checkbox" name="Opciones" value="opcion 2"><br> 

Opcion 3 

<input type="checkbox" name="Opciones" value="opcion 3"></p> 

<p align="center"> 

cinput type="reset" name="Reset" value="Borrar"> 

<input type="submit" name="Submit" value="Enviar"> 

</p> 
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E) Personalizar Colores 


a) Codigo JavaScript 

Mediante este sencillo codigo los usuarios pueden seleccionar la combinacion de 
colores de la pagina. El codigo del script es muy simple: tan solo asigna los colores e 
fondo y texto elegidos por el usuario a las propiedades bgColor y fgColor del 
document. Los valores son elegidos por el usuario a partir de una lista desplegable. 
Este codigo esta pensado para Explorer, pues Netscape no permite modificar estos 
argumentos cuando la pagina ya este cargada. Como es habitual situa este codigo en la 
seccion Head de la pagina. 

<script language="JavaScript"> 

Primero comprobamos el navegador: Si es Netscape o Microsoft 

var mie =(navigator.appName.indexOf("Microsoft")>=0) 

function cambColores(fondos, letras) 

{ 

var ind; 

if (!mie) return 

ind = fondos.selectedlndex; 

document.bgColor = fondos.options[ind].value; 
ind = letras.selectedlndex; 

document.fgColor = letras.options[ind].value; 
return; 

1 


b) Codigo HTML 

La primera linea, con formato H2, es tan solo para muestra. El formulario posee dos 
campos con las listas de los colores seleccionables por el visitante. A1 picar con el raton 
sobre el boton se dispara el evento que pone en marcha la funcion cambColores. Si 
quieres mas colores tan solo tienes que anadir opciones al menu. El color puede ponerse 
por su nombre como en el ejemplo o mediante las cadenas RGB (000000 a FFFFFF). 

<h2>Esta es una muestra de personalizacion de colores</h2> 

<form name="forml" method="post" action=""> 

Fondo: 

<select name="fondo"> 

<option value="yellow">Amarillo</option> 

Coption value="white">blanco</option> 

Coption value="Blue">Azul</option> 

</select> 

Texto: 

<select name="texto"> 

Coption value="yellow">Amarillo</option> 

Coption value="white">blancoc/option> 

Coption value="Blue">Azulc/option> 
c/select> 

cinput type="button" name="Button" value="cambiar" 

onclick ="cambColores(parentElement.fondo,parentElement.texto)"> 

</ form> 
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F) Persianas 


a) Codigo JavaScript 

Un codigo aparentemente complejo pero que responde a una idea muy simple: Ir 
aumentando la altura de la region de recorte de la capa que contiene al parrafo movil, 
usando para ello un evento temporizador. Pero claro si solo hacemos esto irfamos 
viendo como el parrafo va siendo descubierto pero sin sensation de movi mi ento. Es 
como si tapamos un texto con una hoja de papel y la vamos bajando poco a poco. 
^Como lograr que el parrafo se mueva? Centremonos en el scroll de abajo hacia arriba: 
usamos una region de recorte (CLIP) inicial estrecha, solo se ve la primera lfnea; luego 
aumentamos el tamano de esa region bajando su limite inferior y llevamos hacia arriba 
la position vertical de la capa. Repetimos esto hasta que toda la capa sea visible. 

Primero comprobamos el navegador: Si es Netscape o Microsoft 

var mie =(navigator.appName.indexOf("Microsoft")>=0) 
var txtAct=""; 

Argumentos: 

primera: true para la primera vez que se ejecute 
capa: id del objeto DIV con el texto a desplazar 
sent: 0 de arriba-abajo, 1 : de abajo-arriba 
vel: rapidez del desplazamiento (0 a 100 ) 

function vertical(primera, capa, sent, vel) 

1 

var dimen=0; 

//Primera vez que se ejecuta, iniciar todo 
if (primera) 

{ 

//txtAct: objeto global con la capa del scroll. 
txtAct = (mie)?document.all[capa]:document.layers[capa]; 
txtAct.alto = (mie)?txtAct.offsetHeight:txtAct.clip.height; 
txtAct.clp = 0; 
if (mie) 

txtAct.sup = txtAct.style.posTop+txtAct.alto*sent 
else 

txtAct.sup = txtAct.top+txtAct.alto*sent; 
txtAct.incr = Math.round(txtAct.alto*vel/100); 

} 

else 

{ 

txtAct.clp += txtAct.incr; 

//La region de recorte no puede tener una altura mayor del 100% 
if (txtAct.clp > 100) 
txtAct.clp = 100; 

} 

if (sent>0) 

dimen = txtAct.clp; 
else 

dimen =100 - txtAct.clp; 
if (mie) 

{ 

if (sent>0) //de Abajo hacia Arriba sent=l 

{ 

txtAct.style.clip = 'rect(auto, auto,'+ dimen+'%, auto)' 
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} 

else 

{ 

txtAct.style.clip = 'rect('+ dimen+'%, auto, auto, auto)' 

} 

txtAct.style.posTop= 

Math.round(txtAct.sup - txtAct.alto*dimen/100); 

} 

else 


if(sent>0) 

txtAct.clip.bottom = Math.round(dimen*txtAct.alto/100); 

else 

txtAct.clip.top = Math.round(dimen*txtAct.alto/100); 
txtAct.top = Math.round(txtAct.sup - txtAct.alto*dimen/100); 

} 

if (primera) 

verCapa(txtAct, true); 
if (txtAct.clp < 100) 

setTimeout("vertical(false,'',"+sent+","+txtAct.incr+")", 
txtAct.vel); 

else 

txtAct.clp = -1; 

} 

//Muestra u oculta una capa 
function verCapa(obj, sn) 

{ 

var mostrar = (sn)?'block':'none'; 
var estado = (sn)?'visible':'hidden'; 
if (mie) 

{obj.style.display = mostrar; 
obj.style.visibility= estado; 

} 

else 

obj.visibility = estado; 


</script> 

b) Codigo HTML 

Puedes usar esta pagina para comprobar el funcionamiento de la funcion descrita en este 
script. La capa con el texto aparecera de abajo hacia arriba si pulsas el boton Arriba y 
en sentido inverso si pulsas el boton Abajo. 

<HMTL> 

<HEAD> 

<!— Definimos estilos para el menu —> 

<SCRIPT language="JavaScript"> 

<!-Aqui situas el codigo javascript -> 

</script> 

</HEAD> 

<BODY> 

<div id="Layerl" style="position:absolute; width:200px; height:115px; 
z-indextl; left: 200px; top: 138px; background: #CCFF66; layer- 
background-color: #CCFF66; border: lpx none #000000; visibility: 
hidden"> 

Este es el texto que queremos ver desplazandose y con los botones de 
arriba podemos hacer que el parrafo vaya apareciendo de arriba a bajo 
o de abajo arriba. Existe otra forma de lograr este efecto usando 
capas anidadas, pero Netscape se lleva mal con los anidamientos de 
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capas.</div> 

<input type="button" name="Button" value="Arriba" 
onclick="vertical(true,'Layerl', 1, 2)"> 

<input type="button" name="Button" value="Abajo" 
onclick="vertical(true,'Layerl', 0,2)"> 

</B0DY> 

</HTML> 

G) Rollover 

a) Codigo JavaScript 

Con este ejemplo, te podras hacer que tus enlaces cambien al pasar el raton por encima. 
Es muy sencillo y podras modificarlo para lograr efectos vistosos. 

Esta funcion primero comprueba el navegador, pues MIE usa la propiedad style del 
objeto para acceder a los atributos de estilo del objeto, mientras que NS accede 
directamente. Otra diferencia es que MIE admite cualquier propiedad mientras que NS4 
solo puede cambiar el color de fondo. 

Si usas el objeto navegador descrito en otro de los scripts de estos ejemplos puedes 
cambiar la variable mie por algo asf como visita.IE (si visita es el objeto oNavegador). 

Primero comprobamos el navegador: si es Netscape o Microsoft. Si usas el objeto 
navegador esta instruccion podrfa no ser necesaria 

var mie =(navigator.appName.indexOf("Microsoft")>=0) 

function cambProp(obj, propIE, propNS, valorlE, valorNS) 

1 

if (mie) 

{ 

obj = document.all[obj]; 
obj.style[propIE] = valorlE; 

} 

else 

{ 

obj = document.layers[obj] ; 
obj[propNS] = valorNS; 

} 

} 

b) Codigo HTML 

Este sencillo ejemplo te permite cambiar el color de fondo del enlace al pasar el raton 
por encima. Funciona tanto en MIE como en NS4, de ah! la necesidad del span y de 
tantos atributos. Aquf se ha usado un nombre de color, pero puedes usar los codigos 
hexadecimales en su lugar como #FF00AA o el que te parezca. En el evento 
onmouseout el color de fondo para MIE es una cadena vacfa que se interpreta como 
transparente, mientras que NS usa null para lograr el mismo efecto. Recuerda que MIE 
admite cualquier cambio en los atributos del estilo, mientras que NS solo permite 
cambiar el color y la imagen de fondo, al menos hasta la version 4.7. 

<HTML> 

<HEAD> 

<!— aqui va el codigo javascrip —> 

</HEAD> 

<BODY color ="#FFFFFF"> 
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<A HREF="pagina.htm" 

onmouseover="cambProp('enlace 1 , 'background', 'bgColor', 

'yellow','yellow')" 

onmouseout="cambProp('enlace', 'background','bgColor','',null)"> 

<span id='enlace' style="position:relative"> 

rollover 

</span> 

</A> 

</BODY> 

</HTML> 


H) Informacion del Navegador 

Este nuevo script te permitira conocer que Navegador estan usando tus visitantes, y asf 
podras presentar tu pagina de forma mas adecuada. 

a) Codigo JavaScript 

Como ves en este script usamos un objeto llamado o_Navegador con varias 
propiedades y un metodo: 


nombre 

version 

Verent 

standard 

IE 

NS 

OP 

XX 

iniciar 


Propiedades 

string, guarda el nombre del navegador. 

number, numero completo de la version (5.01, 6.02) 

number, numero de version base (4, 5, 6, etc.) 

logico, verdadero si el navegador cumple los standards de W3C 

logico, verdadero para el navegador de Microsoft 

logico, verdadero para el navegador de Netscape 

logico, verdadero para el navegador Opera 

logico, verdadero si es otro navegador. 

Metodos 

averigua y coloca adecuadamente los valores de las propiedades de la 
instancia del objeto. Este metodo es usado por el constructor del objeto, la 
funcion con el nombre oNavegador() 


Asf pues queda como: 

function o_Navegador() { 

this.nombre = navigator.appName; 

this.iniciar = iniciar; 

this.IE = this.nombre.toUpperCase().indexOf('MICROSOFT') >=0; 

this.NS = this.nombre.toUpperCase().indexOf('NETSCAPE') >=0; 

this.OP = this.nombre.toUpperCase().indexOf('OPERA') >= 0; 

this.XX = !this.IE && (this.NS && (this.OP; 

this,version = this.iniciar() ; 

this.Verent = parselnt(this.version); 

this.standard = (this.IE && this.Verent >=6) || (this.NS && 

this.Verent >=6) 

/* ========================================================== 

FUNCION: iniciar 
ARGS: ninguno. 

RETURN: nada 

DESCR: Inicializa los valores del objeto 
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var ver = navigator.appVersion; 
if(ver+"" != "NaN") 
if (this.IE) 

{ 

ver.match(/(MSIE)(\s*)([0-9].[0-9]+)/ig); 
ver = RegExp.$3; 

} 

return ver; 

} //Termina la funcion iniciar el objeto 
[//Termina la definicion del objeto 

b) Codigo HTML 

Esta es una muestra muy simple del uso del objeto oNavegador, tan solo para 
comprobar que funciona y mostrar su uso. Como observaras de entrada es necesario 
definir el nombre del objeto que vayas a usar para almacenar la information del 
navegador y luego usas este objeto convenientemente dentro de tus scripts. 

Si vas a usar este objeto crea una instancia unica defmida en un archivo .js (lo logico es 
que sea el mismo que contenga la definicion del objeto oNavegador) que enlazaras en 
todas las paginas en las que uses scripts. Cada script que dependa del navegador 
consultant este objeto. De esta forma tienes un objeto normalizado para tus paginas y 
cuando aparezcan nuevos navegadores solo tienes que modificar este fichero. 

<body> 

<script language="Javascript"> 
visita = new o_Navegador(); 

document.write("Navegador: "+visita.nombre+"<br>"); 
document.write(" Version: "+visita.version+"<br>"); 
if (visita.standard) 

{ 

document.write("Este navegador cumple con la regulacion "); 
document.write("DOM1 del W3C<br>"); 

} 

else 

{ 

document.write("Este navegador no cumple la regulacion "); 
document.write("DOM1 del W3C<br>"); 

} 

</script> 

</body> 

I) Esquema desplegable (IE) 

Este pequeno ejemplo te permitira construir listas en las que los niveles se pueden abrir 
y cerrar a voluntad. Pruebalo y personalizalo para tus necesidades. 

a) Codigo JavaScript 

Se trata de un script tan simple que apenas necesita comentarios. La funcion recibe 
como argumentos un identificador (iden), y busca el elemento HTML cuyo ID sea igual 
a este valor, para ello usa el metodo getElementById(). Una vez encontrado el elemento 
tan solo modifica su propiedad display: si esta en mostrar (block) lo pone en ocultar 
(none) y viceversa. 

Quizas lo mas interesante de este script sea que usa codigo standard, es decir destinado 
a navegadores que cumplen con los estandares de la W3C, que en lo que afecta al 
DHTML es la normativa del DOM1 y el HTML4. Por tanto este script debe funcionar 
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en Netscape 6 y en MSIE 6, de hecho funciona a partir de MSIE 5, que solo cumple la 
regulacion DOM1 en un 86%. 

<script language="JavaScript"> 
function cambiaEstado(iden) 

| 

var elhtml = document.getElementByld(iden) ; 
if (elhtml.style.display == 'block') 
elhtml.style.display = 'none'; 
else 

elhtml.style.display = 'block'; 

} 

</script> 

b) Codigo HTML 

Como vemos en lugar de usar el evento onclick se hace la llamada a la funcion 
cambiaEstado() directamente en el enlace. El argumento de la llamada es el ID del 
bloque UL de la lista. Simple. 

<body> 

<ul> 

<li><a href="javascript:cambiaEstado('el')">entrada l</a> 

<ul id="el" class="nivell"> 

<li>apartado 1 de entrada l</li> 

<li>apartado 2 de entrada l</li> 

</ul> 

</li> 

<li><a href="javascript:cambiaEstado('e2')">entrada 2</a> 

<ul id="e2" class="nivell"> 

<li>apartado 1 de entrada 2</li> 

<li>apartado 2 de entrada 2 </li> 

</ul> 

</li> 

</ul> 

</body> 

J) Boton mas/menos 

Es una forma de anadir a tus formularios, los botones de control de tipo Windows, que 
evitan tener que escribir los numeros en los cuadros de dialogo. 

a) Codigo JavaScript 

Este es un objeto usado para construir un boton de control para formularios HTML. Su 
mision consiste en incrementar o decrementar el contenido de un campo del formulario 
dependiendo de en que parte del boton pulsemos con el raton. El objeto se denomina 
oBotonCtrl, sus propiedades y metodos son: 

Propiedades 

control object, El objeto campo del formulario sobre el que actua 

max numero, Valor maximo del contenido del campo 

min numero, Valor mmimo del contenido del campo 

seguir -1,0, 1. Es el valor en que se incrementa el valor del campo asociado 

Metodos 

mas Pone a 1 el valor de seguir y llama a la funcion cambiar 
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menos Pone a -1 el valor de seguir y llama a la funcion cambiar 
parar Pone a o el valor de seguir y llama a la funcion cambiar 
cambiar Usa el valor de seguir para actualizar el contenido del campo asociado. Si el 
valor de seguir no es cero inicializa el temporizador para que vuelva a llamar 
a este metodo, con lo que el valor continuara modificandose. 

El objeto se crea como es habitual con el operador new: 
botonl = new oBotonCtrl(formul, control, -20, 20) 

donde formul es un identificador de un formulario y control es el nombre (name) del 
control sobre el que actuara el boton. El formulario debe existir cuando se cree el objeto 
boton. 

<script language="javascript"> 

function oBotonCtrl(formul, idcampo, min, max) 

t 

this.control = "document.forms."+formul+"."+idcampo; 
this.min = min; 
this.max = max; 
this.seguir = 0; 

this.mas = new Function("this.seguir = 1; this.cambiar()"); 
this.menos = new Function("this.seguir = -1; this.cambiar()"); 
this.parar = new Function("this.seguir=0"); 
this.cambiar = cambiar; 
function cambiar() 

I 

var lim = this.seguir>0?this.max:this.min; 

//Crea la variable global $boton para el temporizador 
if ((window.$boton) 

window.$boton = this; 
var Ctrl = eval(this.control); 
if (ctrl.value == * *) 

Ctrl.value =0; 
if (ctrl.value != lim) 

{ 

ctrl.value = parselnt(ctrl.value)+this.seguir; 
if(this.seguir!=0) 

//Llama al metodo cambiar del objeto actual 
setTimeout("$boton.cambiar()", 2 00) ; 
else 

window.$boton = null; 

} 

} 

}//Fin del objeto boton 
</script> 

b) Codigo HTML 

En el codigo HTML como puedes observar se utiliza un image map, o sea, una imagen 
con areas activas que hacen de enlaces, la cual puedes crear con programas como 
Fireworks o tornados de otras webs. 

Cuando la imagen se ha cargado crea el objeto boton2 del tipo oBotonCtrl, que esta 
asociado al campo control del formulario form2, siendo -50 y 50 los valores lfmites 
para el contenido del campo. El objeto tambien puede crearse mediante un evento 
onload del body. En el image map existen dos areas, una para cada mitad del boton. Al 
pulsar el area superior se llama al metodo mas() del boton2 usando un evento 
onmousedown, cuando soltamos el boton se genera un evento onmouseup que llama al 
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metodo parar() del boton2. Como reto queda adaptar este script para que ademas de 
numeros pueda manejar listas de valores. /Alguien se atreve? Quien lo logre que 
comparta su trabajo. 

<BODY> 

<FORM NAME="form2" METHOD="post" ACTION=""> 

<INPUT TYPE="text" name="control"> 

<MAP NAME="m_ctrl2"> 

<area shape="rect" coords="0,0,13,10" href="javascript:void(0)" 
onmousedown="boton2.mas()" onmouseup="boton2.parar()"> 

<area shape="rect" coords="0,11,13,20" href="javascript:void(0)" 
onmousedown="boton2.menos()" onmouseup="boton2.parar()"> 

</MAP> 

<img name="ctrl2" src="ctrl.gif" width="13" height="20" border="0" 
usemap="#m_ctrl2" align="absmiddle" hspace="0" 

onLoad="window.boton2 = new oBotonCtrl('form2control *, -50, 50)"> 
</FORM> 

</BODY> 

K) Password 1 

Una sencilla forma de acceder a una pagina, mediante un password o contrasena, 
empleando para ello JavaScript. 

a) Codigo JavaScript 

La primera funcion estara en la pagina de acceso mientras que la sentencia para 
redireccionar se situa en la cabecera de la pagina a la que se accede desde la primera 
(pagina clave). 

El metodo se basa en colocar paginas cuyo nombre sea el de las passwords, seguido por 
supuesto de la extension htm o html. Cuando un usuario accede debera conocer el 
nombre de la pagina si no recibira un mensaje de pagina no encontrada emitido por el 
navegador. A1 acceder a la pagina clave el navegador se redirecciona a la pagina donde 
tu quieras que llegue. 

function password(texto) 

{ 

if (texto!="") 

location.href= textot".htm"; 

} 

//sentencia para redireccionar 
location.replace("paginabase.htm") 


b) Codigo HTML 

La pagina de acceso contendra la funcion password() o mejor aun un enlace al archivo 
con esta funcion. La pagina clave se llamara con el nombre que asignes a la password, 
por ejemplo re345ty seguido de la extension htm. 


Cuando el usuario accede a tu pagina de acceso escribe en el formulario su clave, si esta 
es re345ty llegara a la pagina re345ty.htm donde una sentencia de redireccion lo envfa a 
tu pagina principal. Si el usuario escribe otra clave, por ejemplo er456, el navegador 
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buscara la pagina correspondiente, en el ejemplo er456.htm, al no hallarla devolvera la 
clasica pagina de error. Deberas crear una pagina clave para cada password que asignes. 

Sencillo ^verdad?, no es a prueba de bombas pero puede funcionar y de hecho funciona. 
La forma de romper este password es encontrar la lista de directorios de tu web, y la 
mayorfa de servidores no permiten esta operacion. Claro tambien podrian acceder a esta 
pagina principal directamente si conocen su nombre. 

Pagina de acceso: 

<HTML> 

<HEAD> 

<!— aqui va el codigo javascrip —> 

</HEAD> 

<BODY COLOR ="#FFFFFF"> 

<FORM NAME="pass" ACTION="">Teclea tu password: 
cinput type="password" name="clave"> 

<input type="button" name="entrar" 

onclick = "password(this.form.clave.value)"> 

</FORM> 

</BODY> 

</HTML> 

Pagina clave: 

<HTML> 

<HEAD> 

<script language="javascript"> 
location.replace("mipaginappal.htm"); 

</script> 

</HEAD> 

<BODY COLOR ="#FFFFFF"> 

</BODY> 

</HTML> 

L) Titulo de pagina animado 

Original Script, con el que entre otras cosas, animar el titulo de la pagina web o 
cambiarlo dinamicamente; valido para Internet Explorer 5 y Netscape 6. 

a) Codigo JavaScript 

Este sencillo script es una muestra de la aplicacion del metodo global setTimeout(), un 
temporizador que aplica un retraso a la ejecucion de una funcion. En este caso la 
funcion a la que se aplica es la denominada animaTitulo( ) que se encarga de desplazar 
el titulo de la pagina creando un efecto marquesina. 

La funcion se ejecuta cada 200 milisegundos, cuanto menor sea este numero mas rapido 
sera el desplazamiento del titulo. Esto se consigue cogiendo el titulo en un momento 
dado y partiendolo en dos partes: una va desde la segunda letra hasta el final, 
instruccion substr(l), mientras que la segunda parte contiene el primer caracter, 

substring(0,1). 

La variable sp, se utiliza porque si en un instante dado la cadena del titulo termina en un 
espacio, este espacio es desechado por MSIE y en la siguiente vuelta la letra siguiente al 
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espacio queda pegada a la anterior, asf que en esta variable guardamos un espacio que se 
inserta entre ambos caracteres. Netscape 6 no presenta este fallo. El efecto puedes verlo 
en esta misma pagina. 

De la misma forma que se crea este efecto con el tftulo de la pagina podrfamos ir 
cambiandolo entre distintos valores, o hacerlo guinar. 

var esp = ' '; 
function animaTitulo() 

1 

var actual = document.title; 

document.title = actual.substr(1) + sp + actual.substring(0, 1); 
if (navigator.appVersion.indexOf('MSIE')>=0) 
sp = (actual.substring(0, 1)==' ')?" 

setTimeout('animaTitulo () 200); 

} 

b) Codigo HTML 

El uso de este script es de lo mas simple, basta vincular la funcion animaTitulo() al 
evento onload de la pagina, y por supuesto ponerle un tftulo. Si te fijas en el ejemplo, 
comprobaras que el tftulo acaba con el caracter extendido &nbsp; el cual se usa en 
HTML para indicar un espacio, esto tan solo es necesario para que el principio y el fin 
de la cadena no queden pegados. 

<HTML> 

<HEAD> 

<TITLE>Titulo animado de tu pagina.Snbsp; </TITLE> 

<!— aqui va el codigo javascrip —> 

</HEAD> 

<body color ="#FFFFFF" onload="animaTitulo()"> 

<!—Contenido de tu pagina—> 

</BODY> 

</HTML> 

M) Bloque fijo 
a) Codigo JavaScript 

Este sencillo codigo te permitira colocar un bloque en tu pagina que permanecera 
estatico aunque hagas un scroll vertical en la ventana del navegador. La funcion tiene 
dos argumentos: obj y posic. El primero de ellos es el identificador del bloque que 
quieres clavar en la ventana, y el segundo es la posicion vertical que quieres que ocupe. 
La funcion actua ligada al evento onscroll del elemento body de la pagina, cuando se 
hace un scroll vertical esta funcion modifica la posicion vertical del cuadro sumandole a 
la posicion inicial el valor del desplazamiento vertical de la ventana, de esta forma el 
bloque parece permanecer fijo. 

function clavar(obj, posic) 

I 

dObj =document.getElementByld(obj); 

dObj.style.posTop = document.body.scrollTop+posic; 

} 

Funciona a partir de IE5, si quieres que funcione en IE4 sustituye la primera lfnea con 

dObj = document.all[obj]; 
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El codigo del ejemplo tal y como esta es compatible con el estandar W3C, algo muy 
recomendable ya que esta normativa parece ser la que esta fijando el estandar para la 
programacion en la red. 

b) Codigo HTML 

Para usar este script basta con vincular la funcion clavar al evento onscroll del elemento 
body. En la pagina debera existir un bloque DIV con posicionamiento absoluto, cuyo 
atributo ID y posicion inicial se usan como argumentos para la llamada a la funcion 
clavar. Este bloque puede tener el estilo definido en llnea como en este ejemplo o bien 
definido como un estilo CSS, que en general es lo mas aconsejable. En cuanto al 
contenido puede ser cualquier texto HTML, es decir, texto, imagenes, listas, un menu de 
enlaces, etc. 

<body onscroll=clavar('cuadro', 100)> 

<div id="cuadro" style="position:absolute; top:100; left:50; 
width:200; height:200">Este contenido permanece fijo en la 
ventana</div> 


N) Paisaje Nevado 1 

Si quieres adornar tus paginas Javascript, con este ejemplo podras colocar una nevada 
en tu pagina 

a) Codigo JavaScript 

Este es un sencillo script para anadir un efecto de nevada en una pagina o en una zona 
de una pagina. En este ejemplo se usa el caracter * (asterisco) para representar los 
copos, lo que ahorra tiempo, pero puedes sustituirlo por una imagen de un copo de nieve 
si te apetece. Para ello en lugar de 

document.write('<font size="'+tama+"' color = "#FFFFFF" >*</font>'); 

Debes poner 

document.write('<img src="copo.gif">'); 

donde copo.gif sera la direccion de imagen que hayas elegido. 

El funcion a miento es muy simple: la funcion iniCopos() se encarga de situar sendos 
bloques DIV con los copos. A esta funcion se la llama con 6 argumentos: numero de 
copos, ancho y alto de la zona nevada, origen x e y de la zona nevada y tiempo de caida. 
La funcion iniNevada() construye un array con los objetos DIV de los copos. La 
funcion nevar() se llama clclicamente mediante un temporizador, y se encarga de ir 
haciendo bajar los copos. 

Partiendo de este codigo basico seguro que puedes lograr efectos interesantes. 

<scr±pt language="JavaScript"> 
function iniCopos(num, anc, alto, veloc) 

I 

var i, x, y; 

for (i = 0; i<num; i++) 

{ 

x = parselnt(Math.random()*anc); 
y = parselnt(Math.random()*alto) ; 
dibujaCopo(i,x, y); 

} 

window.copos = new Array(num); 
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window.coposAlto = alto; 
window.coposAncho = anc; 
window.coposVeloc = veloc; 

} 

function dibujaCopo(num, x, y) 

{ 

var tama = Math.round(Math.random())+ 3 

document.write('<div id="c'+num+'" style="position:absolute; 
width:lpx;') 

document.write('height:lpx; z-index:0; left:'+x+'px; top:'+y+'"px; ') 
document.write(' background-color: #FFFFFF">); 

document.write('<font size="'+tama+'" color = "#FFFFFF" >*</font>'); 
document.write('</div>') ; 

} 

function iniNevadaO 

I 

for (i = 0; i < window.copos.length; i++) 
if (document.all) 

window.copos[i] = document.all[”c"+i] 

else 

window.copos[i] = document.getElementByld("c"+i); 
setTimeout("nevar()",1); 

} 

function nevar() 

{ 

var x, y; 

for (i = 0; i < copos.length; i++) 

1 

y = parselnt(window.copos[i].style.top); 
x = parselnt(window.copos[i].style.left) ; 
if (Math.random() > 0.5) 

y += parselnt(Math.random()+1) ; 
y += parselnt(Math.random()+2); 
window.copos[i].style.top = y; 
if (y > document.body.scrollTop + coposAlto) 

{ 

window.copos[i].style.top = document.body.scrollTop- 
Math.round(Math.random()*10); 
window.copos[i].style.left = 

parselnt(Math.random()*coposAncho-l) ; 

} 

} 

setTimeout("nevar()", coposVeloc); 

} 

</script> 

b) Codigo HTML 

El codigo de la pagina es bien simple: una llamada a la funcion iniCopos() en el cuerpo 
de la pagina dibujara los bloques DIV con los copos, mientras que un evento onload 
vinculado a la funcion iniNevada() hara que los copos comiencen a caer por el paisaje 
nevado. 

Como siempre las funciones descritas en la pagina del codigo debes situarlas en la 
seccion HEAD de la pagina. 

<body onload="iniNevada()"> 

<script language="JavaScript"> 
iniCopos (50, 400, 300, 100, 100, 50); 

</script> 

</body> 
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O) Paisaje Nevado 2 


Otro script para colocar una nevada navidena en tu pagina. Se trata de un script bastante 
completo donde puedes aprender un monton de cositas sobre los objetos Javascript. 

a) Codigo JavaScript 

Este es un sencillo script para anadir un efecto de nevada en una pagina o en una zona 
de una pagina. En este ejemplo se usa el caracter * (asterisco) para representar los 
copos, lo que ahorra tiempo, pero puedes sustituirlo por una imagen de un copo de nieve 
si te apetece. Para ello en lugar de 

document.write('<font size="'+tama+"' color = "#FFFFFF" >*</font>'); 

Debes poner 

document.write('<img src="copo.gif">'); 

donde copo.gif sera la direccion de imagen que hayas elegido. 

El funcion a miento es muy simple: la funcion iniCopos() se encarga de situar sendos 
bloques DIV con los copos. A esta funcion se la llama con 6 argumentos: numero de 
copos, ancho y alto de la zona nevada, origen x e y de la zona nevada y tiempo de caida. 
La funcion iniNevada() construye un array con los objetos DIV de los copos. La 
funcion nevar() se llama ciclicamente mediante un temporizador, y se encarga de ir 
haciendo bajar los copos. 

Partiendo de este codigo basico seguro que puedes lograr efectos interesantes. 

<script language="JavaScript"> 
function iniCopos(num, anc, alto, veloc) 

{ 

vaf i, x, y; 

for (i = 0; i<num; i++) 

{ 

x = parselnt(Math.random()*anc); 
y = parselnt(Math.random()*alto) ; 
dibujaCopo(i,x,y); 

} 

window.copos = new Array(num); 
window.coposAlto = alto; 
window.coposAncho = anc; 
window.coposVeloc = veloc; 

} 

function dibujaCopo(num, x, y) 

{ 

var tama = Math.round(Math.random())+ 3 

document.write('<div id="c'+num+'" style="position:absolute; 
width:lpx;') 

document.write('height:lpx; z-index:0; left:'+x+'px; top:'+y+'"px; ') 
document.write(' background-color: #FFFFFF">); 

document.write('<font size="'+tama+'" color = "#FFFFFF" >*</font>'); 
document.write('</div>'); 

} 

function iniNevadaO 
{ ' 

for (i = 0; i < window.copos.length; i++) 
if (document.all) 

window.copos[i] = document.all [ "c"+i] 


else 


window.copos[i] = document.getElementByld("c"+i) ; 
setTimeout("nevar()", 1) ; 

} 

function nevar() 

i 

var x, y; 

for (i = 0; i < copos.length; i++) 

1 

y = parselnt(window.copos[i].style.top); 
x = parselnt(window.copos[i].style.left); 
if (Math.random() > 0.5) 

y += parselnt(Math.random()+1); 
y += parselnt(Math.random()+2); 
window.copos[i].style.top = y; 
if (y > document.body.scrollTop + coposAlto) 

( 

window.copos[i].style.top = document.body.scrollTop- 
Math.round(Math.random()*10) ; 
window.copos[i].style.left = 

parselnt(Math.random()*coposAncho-l); 

} 

} 

setTimeout("nevar()", coposVeloc); 

} 

</script> 


b) Codigo HTML 

El codigo de la pagina es bien simple: una llamada a la funcion iniCopos() en el cuerpo 
de la pagina dibujara los bloques DIV con los copos, mientras que un evento onload 
vinculado a la funcion iniNevada() hara que los copos comiencen a caer por el paisaje 
nevado. 

Como siempre las funciones descritas en la pagina del codigo debes situarlas en la 
seccion HEAD de la pagina. 

<body onload="iniNevada()"> 

<script language="JavaScript"> 
iniCopos(50, 400, 300, 100, 100, 50); 

</script> 

</body> 


P) Estrella Navidena 1 

^Te gustarfa ver la estrella de la Navidad en tu pagina? Sigue las instrucciones de este 
script y podras ver como la estrella o Santa. Claus o los renos atraviesan tu pagina. 
a) Codigo JavaScript 

Este ejemplo utiliza los objetos moviles que se pueden encontrar en 
http://www.ciudadfutura.com/javascriptdesdecero/casos/movilenlaz/moviles.htm. La 
funcion que desencadena todo el movimiento es iniAnima(), en ella se define estnav 
como un objeto oMovil(), los argumentos para crearlos son: ID de la capa DIY donde 
se encuentra la estrella, posiciones X, Y iniciales y finales del movimiento, tiempo que 
debe tardar ese movimiento, un valor logico (true o false) para indicar si el objeto debe 
permanecer visible al acabar el movimiento y el nombre de la funcion que define el 
movimiento de la estrella, esta ultima funcion es optativa, si no se usa la estrella se 
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movera linealmente desde la position inicial a la final. En este ejemplo se ha usado una 
funcion senoidal, puedes usar cualquier otra. Si quieres que el movimiento se repita una 
y otra vez solo tienes que anadir la sentencia: 
animEst.enlazar('animEsf, null,3000); 

Antes de animEst.iniciar(). El argumento ultimo (3000 en este caso) indica los 
milisegundos que tardara en repetirse el movimiento. 

<scr±pt language="JavaScript" src="rutbasicas.js"> 

</script> 

<script language="JavaScript" src="objmovilenl.js"> 

</script> 

<script language="JavaScript"> 
function iniAnima() 

{ 

var estnav = new oMovil('estrella', 10, 200,600, 190, 60, 
true, 'movEstrella'); 

estnav.situar() 

animEst = new oAnimacion(estnav) 
animEst.iniciar('animEst'); 

} 

function movEstrella() 


x = Math.round(this,leeX()+this.incx) ; 

y = this.pyO + Math.round(40*Math.sin(x*Math.PI/180) ) 

this.ponY(y); 

this.ponX(x) ; 

this.situar() ; 

this.esFinal = Math.abs(this.pxl-x) < Math.abs(this.incx); 
} 


b) Codigo HTML 

En la pagina solo debes colocar la llamad a la funcion que inicia todo el movimiento y 
por supuesto un bloque DIV para contener a la figura que desees mover, puede ser la 
estrella del ejemplo o un Papa Noel o los tres reyes magos o los renos .... 

<html> 

<head> 

<title> 

Animando el titulo de tu pagina.Snbsp; </title> 

<!— aqui va el codigo javascrip —> 

</head> 

<body color ="#FFFFFF" onload="iniAnima()"> 

<DiV id="estrella" style="position:absolute; z-index:l; width: 1; 
height: 1; overflow: visible; left: 6px; top: 14px"ximg 
src="simbolos/estnav.gif" width="57" height="37"></div> 

<!—Contenido de tu pagina—> 

</body> 

</html> 
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Q) Estrella Navidena 2 


Este texto muelle seguira a tu raton por toda la pagina con un efecto elastico muy 
vistoso. Aprovechalo para colocar un mensaje de felicitation de navidad... o cualquier 
otro uso. 

a) Codigo JavaScript 

Aquf tienes un ejemplo de utilization del objeto raton con estela que puedes descargar 
en la pagina: 

http://www.ciudadfutura.com/iavascriptdesdecero/casos/movilenlaz/moviles.htm 

Se trata de una frase que seguira al raton con un movimiento elastico. Si observas el 
raton en esta pagina comprenderas el efecto que se hace mas evidente si mueves el raton 
con cierta rapidez. Despues de leer la documentation de este objeto te sera facil 
comprender el funcion ami ento del script. Descarga en tu sitio el archivo js del objeto 
estela, o enlazalo al de esta web, y anade las funciones que aquf te presentamos. La 
primera de estas funciones es iniciarEstela(texto), el argumento es el texto que seguira 
al raton. Esta funcion coloca en la pagina las letras de la frase que seguira al raton (cada 
letra se coloca en un bloque DIY para poder controlar su position), ademas crea e 
inicializa el objeto oEstela propiamente dicho y vincula los eventos de movimiento del 
raton y el temporizador para ir actualizando la position del texto. La otra funcion, 
mianimacionO, es la que se encarga de ir colocando las letras para que sigan al raton 
con este curioso efecto. 

<script language="JavaScript" src="rutbasicas.js"> 

</script> 

<script language="JavaScript" src="objmovilenl.js"> 

</script> 

<script language="JavaScript"> 
function mianimacion(objest) 

{ 

vat indAct, x, y, xfin, yfin, blqAct; 
var incX, incY; 

for(indAct = 0;indAct < objest.puntos.length; indAct++) 

{ 

blqAct = objest.puntos[indAct]; 

x = blqAct.xAct; 

y = blqAct.yAct; 

xfin = objest,referX+indAct*10; 

yfin = objest.referY; 

incX = 6*objest.puntos.length/(1+indAct); 
incY = 6*objest.puntos.length/(1+indAct); 
if (x < xfin) 

{ 

x += incX; 

if (x > xfin) x = xfin; 

} 

else{ 

if (x > xfin) 

{ 

x -= incX; 

if (x < xfin) x = xfin; 

} 

} 

if (y < yfin) 

{ 
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y += incY; 

if (y > yfin) y = yfin; 

} 

else { 

if (y != yfin) 

{ 

y -= incY; 

if (y < yfin) y = yfin; 

} 

} 

blqAct.xAct = x; 
blqAct.yAct = y; 
blqAct.style.left = x; 
blqAct.style.top = y; 

blqAct.fin =(x == xfin) && (y == yfin) 

} 

} 

//El evento temporizador solo entiende de variables globales 
//por eso se declara aqui la variable estela 
var estela; 

function iniciarEstela(texto) 

{ 

var puntos = new Array(); 

for (i=0; i< texto.length; i++) 

{ 

document.write('<div id="l'+i+'" style="position:absolute; '); 
document.write('width:lpx; height:lpx; color: red; '); 
document.write('z-index:14; left: Opx; top: 

Opx">'+texto.charAt(i)) ; 
document.write('</div>') 
puntos[i]="l"+i; 

} 

estela = new oEstela( puntos, -1,10, -1, 20); 
for (i=0; i< estela.puntos.length; i++) 

{ 

estela.puntos[i].xAct = estela.referX; 
estela.puntos[i].yAct = estela.referY; 
estela.puntos[i].fin = false; 

} 

document.onmousemove = new Function("estela.seguir()"); 
estela.tempor = setlnterval('mianimacion(estela)',5); 

} 

b) Codigo HTML 

En la pagina solo debes colocar la llamada a la funcion que crea la estela y dispara la 
animation del texto. 

<html> 

<head> 

<title> 

Animando el titulo de tu pagina.Snbsp; </title> 

<!— aqui va el codigo javascrip —> 

</head> 

<body color ="#FFFFFF" > 

<script language="Javascript"> 
iniciarEstela("Felicidades"); 

</script> 

<!—Contenido de tu pagina—> 

</body> 

</html> 
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R) Buscador en la Pagina 


Este sencillo script te permitira colocar un buscador para que tus visitantes puedan 
encontrar un texto cualquiera en tus paginas. Funciona de manera muy similar a 
CTRL+F o la opcion Buscar en esta pagina del menu Edicion de Internet Explorer. 

a) Codigo JavaScript 

Cuando un visitante desea buscar un texto determinado en nuestra pagina puede usar 
como sabes una de las opciones del menu Edicion del Navegador. Pero ^no serfa 
interesante ofrecerle un pequeno formulario para realizar esa busqueda?. Pues este 
pequeno script te permite hacerlo. Se trata de aprovechar el objeto textRange, exclusivo 
de Microsoft Internet Explorer. Este objeto se usa para manipular una porcion de texto 
incluida en el documento HTML, texto que puede ser toda la section body. El 
funcionamiento de la funcion buscarTxt es muy simple: crea un objeto textRange con 
el elemento body de la pagina guardandolo en contenido, lo copia en el objeto 
textRange temporal, luego usa el metodo findText para encontrar el texto pasado como 
argumento. Una vez hallado pregunta si se desea continuar la busqueda, en caso 
afirmativo modifica contenido para que englobe al texto en el que aun no se ha buscado 
y repite el proceso hasta que se le diga que pare o no encuentre mas coincidencias. 

Una observation en cuanto a los argumentos, ambos opcionales, del metodo: el primer 
argumento indica el numero de caracteres a buscar y si es negativo indica buscar hacia 
atras, y el segundo argumento indica como ha de ser la busqueda: 

0: Encuentra coincidencias parciales 
2: Busca palabras completas 

4: Mayusculas y minusculas no se consideran iguales. 

function buscarTxt(texto) 

{ if(!document.all) return 

var contenido = document.body.createTextRange() ; 
var seguir = true; 

var temporal = contenido.duplicate(); 
var existe = temporal.findText(texto,0,0) 
while(existe && seguir) 

I 

temporal.scrollIntoView(true) 
temporal.select() ; 

//Modifica contenido para que comience al final 
//de la palabra encontrada 

contenido.setEndPoint("StartToEnd", temporal); 
seguir = confirm (",; Continuar la busqueda?") 
if (seguir) 

{ 

//Repite labusqueda 

temporal = contenido.duplicate(); 

existe = temporal.findText(texto,0,0) 

} 

} 

if (seguir) 

alert("Fin del documento") 

} 
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b) Codigo HTML 


En esta pagina de ejemplo solo se ha colocado un formulario con un campo de texto y 
un boton para comenzar la busqueda. El evento onclick en este boton tiene vinculada la 
funcion buscarTxt, por lo que al pulsarlo llamara a esta funcion usando como 
argumento el valor contenido en el campo de texto. Logicamente la pagina debera 
contener texto donde realizar la busqueda. 

<html> 

<head> 

<title>Buscando </title> 

<script language="Javascript"> 

<! — aqui va el codigo javascript —> 

</script> 

</head> 

<body color ="#FFFFFF" > 

<form name="forml" method="post" action=""> 

<input type="text" name="texto"> 

<input type="button" name="Button" value="Buscar" 
onclick="buscarTxt(this.form.texto.value)"> 

</form> 

<!— Resto de la pagina —> 

</body></html> 

S) Pagina de Inicio 

Este pequeno script te permite colocar un boton o un enlace en tu pagina para sugerir al 
visitante que coloque tu sitio como pagina de inicio en su navegador. 

a) Codigo JavaScript 

Mediante este sencillo codigo puedes tener en tu pagina un enlace para que los usuarios 
coloquen tu pagina como pagina de inicio en su navegador. Hace uso de los behaviors, 
una caracterfstica exclusiva del explorador de Microsoft presente a partir de la version 
5. El codigo comprueba en primer lugar si el navegador es MSIE 5+ y soporta los 
behaviors, si es asi simplemente escribe en la pagina el enlace con la frase aclaratoria de 
lo que hace el mismo. En lugar de texto puedes colocar un boton o una imagen, a fin de 
cuentas no es mas que un enlace que actualiza el valor de style.behavior y llama al 
metodo setHomePage con la direccion URL que queremos colocar como pagina de 
inicio por defecto del navegador. 

<script language="JavaScript"> 
var verBase = navigator.appVersion; 
var url = "'http://www.misitio.com/'"; 
verBase = verBase.match(/MSIE ( [ A ;]+);/); 
verBase =parseFloat(verBase [1]); 

if(navigator.appVersion.indexOf('MSIE') >-l && verBase >=5) 

{ 

with(document){ 

write('<A HREF="#" ') ; 

write('onClick="this.style.behavior=') ; 

write("'url(#default#homepage)';") 

write('this.setHomePage('+url+');">'); 

write('Pon mi sitio en tu pagina de inicio</a>') 

} 

} 

</script> 
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b) Codigo HTML 


Como ves este script esta situado directamente en el cuerpo del documento, puedes 
ponerlo en el lugar que desees. Tambien podrfas haber usado una funcion para el codigo 
y colocar una llamada en la seccion body. Cuestion de gustos. Lo que no debes olvidar 
es que el script produce texto y debe ejecutarse a medida que se carga la pagina. 

Cuando el usuario pulsa el enlace le aparecera un cuadro de dialogo para que confirme 
la eleccion, esto es inevitable por cuestiones de seguridad. 

<html> 

<title>Titulo de tu pagina</titulo> 

<head> 

</head> 

<body> 

<!—Coloca aqui el codigo y no Divides 
las etiquetas <script>—> 

</body> 

</html> 

T) Carrusel de Imagenes 

Con este script podras colocar en tu pagina un carrusel de imagenes con el que podras 
mostrar de forma secuencial toda una lista de imagenes. Ideal para galenas, thumbplus, 
etc. 

a) Codigo JavaScript 

Esta coleccion de funciones nos permitira colocar en nuestra pagina un proyector de 
imagenes con el que el visitante puede ir viendo una por una todas las imagenes de una 
serie. El sistema permite que sea el visitante el que vaya avanzando o retrocediendo por 
la coleccion de imagenes o bien puede usar un modo automatico con el que las 
imagenes van cambiando cada cierto tiempo. Muy util para galenas de fotos, por 
ejemplo. 

El script lo que hace, es recorrer de forma controlada una lista con las direcciones de las 
imagenes que queramos mostrar, lista que se implementa como un Array. Para 
recorrerla se usa la funcion cambio(sen), en la que el argumento indica si vamos hacia 
adelante o hacia atras. Esta funcion se ejecuta al pulsar sobre los correspondientes links 
que se colocan en la pagina. 

La otra funcion importante es la del cambio automatico de imagenes, la funcion 
automat(miliseg). Esta tan solo inicia un temporizador que llama a la funcion pasar() 
con el intervalo de tiempo indicado en el argumento. La funcion parar() se usa para 
detener el cambio automatico de las imagenes deteniendo el temporizador. 

La funcion reset() tan solo reinicia las variables globales y coloca la imagen inicial. Las 
variables globales usadas son la lista de imagenes, un contador para recorrer la lista, la 
variable tiempo para almacenar el intervalo para el cambio automatico de las imagenes 
y tempor para almacenar el temporizador. 
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2.jpg', '3.jpg' , '4.jpg'); 


<script language="JavaScript"> 

var lista = new Array('1.jpg', ' 

var contador =0; 
var tiempo =0; 
var tempor = null; 
function cambio(sen) 

{ 

contador+= sen; 
if (contador ==lista.length) contador = lista.length-1; 
else 

if (contador < 0) contador = 0; 
document.images.centro.src = lista[contador] 
window.status="Imagen numero "+contador 
} 

function reset () 

{ 

contador =0; 
fin = false; 

document.images.centro.src = lista[0] 

} 

function automat(seg) 

4 

tiempo = parselnt(seg); 
reset () ; 

window.status="Pase automatico"; 
if (isNaN(tiempo) || tiempo <= 0) 
alert("Error en el tiempo") 
else 

tempor = setTimeout("pasar()", tiempo) 

} 

function parar() 

4 

clearTimeout(tempor) ; 

} 

function pasar() 

I 

cambio(1); 

if (contador < lista.length-1) 
tempor = setTimeout("pasar()", tiempo) 

} 

// — > 

</script> 


b) Codigo HTML 

Para ilustrar este script esta pagina usa una tabla con dos filas y tres columnas. En la 
columna central de la fila superior se encuentra la imagen que ira cambiando, y las 
celdas laterales contienen los enlaces que llaman a la funcion cambiar(). Estos enlaces 
puede cambiarlos por iconos para mejorar la estetica. En la fila inferior, se encuentra el 
formulario que permitira al visitante ver el paso de imagenes de forma automatica, para 
ello debera teclear un numero de milisegundos y pulsar el boton inicio, desde ese 
momento las imagenes iran cambiando solas. 

<html> 

<head> 

<title>Animando el titulo de tu pagina.Snbsp; </title> 

<!— aqui va el codigo javascript —> 


</head> 

Cbody color ="#FFFFFF"> 

<table width="82%" border="0" align="center"> 

<tr> 

<td width="30%" align="right" height="247"><font color="#0033CC"><b> 

<a href="javascript:cambio(-1)">atras</a> 

</bx/fontx/td> 

<td align="center" width="48%" height="247"Ximg id="centro" 
src="l. jpg" height="170"X/td> 

<td width="22%" height="247"Xfont color="#0033CC"Xb> 

<a href="javascript:cambio(1)">avance</a> 

</bx/fontx/tdx/tr> 

<tr> 

<td width="30%" align="right"Xfont color="#0033CC"X/fontx/td> 

<td width="48%" align="center"xbxfont 
color="#0033CC">Automatico</fontx/b> 

<form name="forml" method="post" 

action="javascritp:automat(this.forml.tiempo.value)"> 

<input type="text" name="tiempo"> 

<br> 

<input type="submit" name="Button" value="Inicio"> 

<input type="button" name="Button2" value="Parar" onclick="parar()"> 
</form> 

</td> 

<td width="22%"xfont color="#0033CC"x/fontx/td> 

</tr> 

</table> 
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